Redux入门

最新推荐文章于 2023-02-24 23:13:32 发布
最新推荐文章于 2023-02-24 23:13:32 发布
阅读量157 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhu_hualong/article/details/90039998
版权

典型的Web应用程序通常由共享数据的多个UI组件组成。通常，多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦，特别是如果有多个通道用于更新同一个对象。

举个例子：一个带有购物车的网站。在顶部，我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件，显示购物车中商品的总价。如果用户点击添加到购物车按钮，则这两个组件应立即更新当前的数据。如果用户从购物车中删除商品、更改数目、使用优惠券或者更改送货地点，则相关的UI组件都应该更新出正确的信息。可以看到，随着功能范围的扩大，一个简单的购物车将会很难保持数据同步。在这篇文章中，我将介绍Redux框架，它可以帮助你以简单易用的方式构建复杂项目并进行维护。

什么是Redux

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。 见下图：

在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action。分发在这里意味着将可执行信息发送到store。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。

配置Redux

配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更新了nodejs，npm和yarn。我们生成一个redux-shopping-cart项目并安装Redux：

create-react-app redux-shopping-cart

cd redux-shopping-cart
yarn add redux # 或者npm install redux

首先，删除src文件夹中除index.js以外的所有文件。打开index.js，删除所有代码，键入以下内容：

import { createStore } from "redux";

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);
  1. 首先，我们从redux包中引入createStore()方法。
  2. 我们创建了一个名为reducer的方法。第一个参数state是当前保存在store中的数据，第二个参数action是一个容器，用于：
    • type - 一个简单的字符串常量，例如ADD, UPDATE, DELETE等。
    • payload - 用于更新状态的数据。
  3. 我们创建一个Redux存储区，它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问，但只能通过提供的reducer进行更新。

注意到，我在第二点中所提到state。目前，state为undefined或null。要解决这个问题，需要分配一个默认的值给state，使其成为一个空数组：

 const reducer = function(state=[], action) {
  return state;
}

目前我们创建的reducer是通用的。它的名字没有描述它的用途。那么我们如何使用多个reducer呢？我们将用到Redux包中提供的combineReducers函数。修改代码如下：

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const cartReducer = function(state=[], action) {
  return state;
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

在上面的代码中，我们将通用的reducer修改为productReducer和cartReducer。创建这两个空的reducer是为了展示如何在一个store中使用combineReducers函数组合多个reducer。

接下来，我们将为reducer定义一些测试数据。修改代码如下：

// src/index.js

…

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const cartReducer = function(state=initialState, action) {
  return state;
}

…

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

我们使用store.getState()在控制台中打印出当前的状态。你可以在终端中执行npm start或者yarn start来运行dev服务器。并在控制台中查看state。
在这里插入图片描述
现在，我们的cartReducer什么也没做，但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。我们首先定义ADD_TO_CART的逻辑：

// src/index.js

…

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

…

我们继续来分析一下代码。一个reducer需要处理不同的action类型，因此我们需要一个SWITCH语句。当一个ADD_TO_CART类型的action在应用程序中分发时，switch中的代码将处理它。
正如你所看到的，我们将action.payload中的数据与现有的state合并以创建一个新的state。

接下来，我们将定义一个action，作为store.dispatch()的一个参数。action是一个Javascript对象，有一个必须的type和可选的payload。我们在cartReducer函数后定义一个：

…
function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
…

在这里，我们定义了一个函数，返回一个JavaScript对象。在我们分发消息之前，我们添加一些代码，让我们能够监听store事件的更改。

…
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

接下来，我们通过分发消息到store来向购物车中添加商品。将下面的代码添加在unsubscribe()之前：

…
store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

下面是整个index.js文件：

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

保存代码后，Chrome会自动刷新。可以在控制台中确认新的商品已经添加了。
在这里插入图片描述

组织Redux代码

index.js中的代码逐渐变得冗杂。我把所有的代码都写在index.js中是为了起步时的简单易懂。接下来，我们来看一下如何组织Redux项目。首先，在src文件夹中创建一下文件和文件夹：
src/
├── actions
│ └── cart-actions.js
├── index.js
├── reducers
│ ├── cart-reducer.js
│ ├── index.js
│ └── products-reducer.js
└── store.js

然后，我们把index.js中的代码进行整理：

// src/actions/cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';

export function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}

// src/reducers/products-reducer.js

export default function(state=[], action) {
  return state;
}

// src/reducers/cart-reducer.js

import  { ADD_TO_CART }  from '../actions/cart-actions';

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

// src/reducers/index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer;

// src/store.js

import { createStore } from "redux";
import rootReducer from './reducers';

let store = createStore(rootReducer);

export default store;

// src/index.js

import store from './store.js';
import { addToCart }  from './actions/cart-actions';

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

整理完代码之后，程序依然会正常运行。现在我们来添加修改和删除购物车中商品的逻辑。修改cart-actions.js和cart-reducer.js文件：

// src/reducers/cart-actions.js
…
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';
…
export function updateCart(product, quantity, unitCost) {
  return {
    type: UPDATE_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

export function deleteFromCart(product) {
  return {
    type: DELETE_FROM_CART,
    payload: {
      product
    }
  }
}

// src/reducers/cart-reducer.js
…
export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    case UPDATE_CART: {
      return {
        ...state,
        cart: state.cart.map(item => item.product === action.payload.product ? action.payload : item)
      }
    }

    case DELETE_FROM_CART: {
      return {
        ...state,
        cart: state.cart.filter(item => item.product !== action.payload.product)
      }
    }

    default:
      return state;
  }
}

最后，我们在index.js中分发这两个action：

// src/index.js
…
// Update Cart
store.dispatch(updateCart('Flour 1kg', 5, 110));

// Delete from Cart
store.dispatch(deleteFromCart('Coffee 500gm'));
…

集成React

// src/index.js
…
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

const App = <h1>Redux Shopping Cart</h1>;

ReactDOM.render(
  <Provider store={store}>
    { App }
  </Provider> ,
  document.getElementById('root')
);
…
Zhu_hualong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Redux实现原理解析及应用
zhaozhen161的博客
05-25 429
1、为什么要用redux 在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题 2、Redux设计理念 Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图。 3、.
redux-saga入门
webchang的博客
03-16 3461
redux-saga的介绍、API、使用案例
redux 详解（带你学习store、action、redux）
二三的博客
02-24 1508
react 用了一年多，但一直对 redux 了解不多，一直想找个机会彻底掌握它，所以有了今天这篇文章，如果你也对 redux 不够了解，那么可以仔细阅读下，相信会有所收获。
Redux 入门教程，应用的状态管理器
大灰狼的小绵羊哥哥的博客
01-07 580
http://www.jianshu.com/p/d296a8c34936?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io Redux由Flux演变而来，提供几个简单的API来实现状态管理，所谓状态指的是应用数据，所以，Redux本质上是用来管理数据的。 进一步，Redux配合支持数据绑定的视图库使用，就可以将应用
React redux 修改数据 store.dispatch(action)
weixin_40030173的博客
08-03 4440
一、获取数据store.getState() 二、修改数据 store.dispatch(action) src/store/index.js import { createStore } from 'redux' // 引入方法 import reducer from './reducer' const store = createStore(reducer) // 创建数据存储仓库 export default store src/store/reducer.js const de
Redux官网学习知识点（day1）（State\Action\Reducer\Store\Dispatch\Selector)
Pandora_417的博客
10-11 231
ReactDOM.render( // 严格模式检查只在开发模式下运行，不会与生产模式冲突 <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); 1、<React.StrictMode> 严格模式 Stri
Redux入门学习
yleave的博客
01-21 241
文章目录基本概念三大原则使用 Redux 最简单的示例：计数器梳理使用 react-redux 的示例：计数器梳理使用 combineReducers 合并 reducer中间件自定义中间件使用第三方中间件异步中间件使用 redux-thunk 的示例Redux 示例优化Redux 调试工具REF Demo 仓库：https://github.com/yleave/redux-demo 基本概念   有几个图片可以帮助理解 redux:   这张图片说明了 reudx 的作用：组件间的信息传递不用再只能通过
Redux入门基础教程
08-10
下面将详细介绍 Redux 的入门基础知识。 **一、Redux 基本概念** 1. **Store**: Store 是 Redux 应用的核心，它持有应用的所有状态。你可以通过 `createStore` 函数创建 store，同时 store 提供了 `subscribe`、`...
react redux入门示例
08-27
React Redux入门示例 React Redux是一个流行的前端状态管理框架，用于管理React应用程序中的状态。下面是React Redux入门示例的知识点总结： 一、环境准备 在使用React Redux之前，需要先准备好环境。这里使用...
learn-redux:Redux入门
05-18
学习Redux Redux提供了一个可靠，稳定和成熟的解决方案来管理您的React应用程序中的状态。 通过少数一些有用的小模式，Redux可以将您的应用程序从一团混乱和分散的状态转变为一个令人愉快的，易于理解的现代...
Redux学习笔记.docx(Redux入门的都在这里了)
02-20
Redux学习笔记,Redux入门的都在这里了 （一）Flux概念 （二）Redux概念 （三）使用纯Redux ．通过引用Redux.min.js ．定义reducer: ．创建store实例(以定义的reducer为参数) ．注册store内state改变时的事件...
Redux入门实战——todo-list2.0实现.7z
08-11
在`Redux入门实战——todo-list2.0实现`的压缩包中，你可能会找到以下文件： - `index.js`: 应用入口，包含`Provider`组件和应用根组件。 - `App.js`: 主应用组件，可能包含了`TodoList`和`TodoForm`等子组件。 - `...
redux-starter:Redux入门
05-18
redux-starter 这是仅用于开发的入门工具包，旨在帮助使启动项目 克隆回购： git clone https://github.com/mattybow/redux-starter cd redux-starter 跑步： npm install npm start
redux-starter:Redux入门项目
05-11
一个现代的React / Redux启动器该启动程序最初基于 ，后来进行了改进，包括Redux和完善的模块热加载以及SASS支持。 如您所见，所有保存的文件更改将在运行的应用程序中自动更新。 这包括应用程序代码，Reducer代码，...
redux_demos:redux入门与进阶
04-19
Redux 是一个广泛使用的JavaScript状态管理库，主要用于构建可预测化的状态容器，尤其在React应用中。这个名为"redux_demos"的压缩包很显然是为了帮助初学者和有经验的开发者深入理解和实践Redux的用法。它包含了一...
Redux详解（一）
天道酬勤
05-30 8838
启示Redux由Flux演变而来，但受Elm的启发，避开了Flux的复杂性。 不管你有没有使用过他们，只需几分钟就能上手Redux。安装安装稳定版：npm install --save redux多数情况下，你还需要使用React绑定库和开发者工具npm install --save react-redux npm install --save-dev redux-devtools要点应用中所有的
Redux从设计到源码
一个有情怀的程序猿博客
08-04 171
本文主要讲述三方面内容： Redux 背后的设计思想 源码分析以及自定义中间件 开发中的最佳实践 在讲设计思想前，先简单讲下Redux是什么？我们为什么要用Redux？ Redux是什么？ Redux是JavaScript状态容器，能提供可预测化的状态管理。 它认为： Web应用是一个状态机，视图与状态是一一对应的。 所有的状态，保存在一个对象里面。 我们先来看看“状态容器”、“视图与状态一一对应”以及“一个对象”这三个概念的具体体现。 如上图，Store是Redux中的..
redux中间件原理-讲义
只会写bug
06-15 767
1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 通俗来说，redux中间件就是对dispatch的功能做了扩展。 先来看一下传统的redux执行流程： 图
前端进阶-redux源码分析--dispatch如何更新store
weixin_33918357的博客
03-22 472
createStore目的：createStore = (..arguments) => newState 先来看creatStore部分源码 export default function createStore(reducer, preloadedState, enhancer) { let currentReducer = reducer let currentSt...
react redux教程
最新发布
08-14
- *3* [React学习(三)：Redux入门教程](https://blog.csdn.net/sinat_33523805/article/details/102718979)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值