接下来也只是分享一些小案例来让你好好理解该如何使用Redux
详情具体可以参考官方文档：学习前提
开始之前确保你的设备已经安装：
- Node.js
- npm或者yarn(本人自己用到的是yarn)
什么是Redux
用官方文档的话来说，就是Redux 是 JavaScript 状态容器，提供可预测化的状态管理。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。 见下图：
---现在看可能对于刚接触者一脸蒙××，等到了我们实现了一个小demo我们再回过头来理解可能会更加清晰 用了会怎么样
可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验。总得来说就是实现项目工程化
本次通过一个购物车的小栗子方便来理解redux
配置Redux
配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更新了nodejs，npm和yarn。我们生成一个redux-shopping-cart项目并安装Redux：
create-react-app redux-shopping-cartcd redux-shopping-cartyarn add redux # 或者npm install redux```首先删除src文件下除index.js以外的文件，以及删除index.js所有代码，插入以下内容：
import { createStore } from "redux";
//state:存储数据 action：容器const reducer = function(state, action) { return state;} const store = createStore(reducer);//创建一个redux存储区`
const reducer = function(state=[], action) { return state;} 如果你有多个redux怎么办？我们将用到Redux包中提供的combineReducers函数。修改代码如下：
// src/index.jsimport { 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定义一些初始数据？
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());//获取state 我们在终端输入命令npm start或yarn start,就能看到state的输出，如下图：
我们来定义商品的增加，删除，修改的操作(action)，先写增加： 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]//将action.payload中的数据与state合并成新的state } } default: return state; }} 接下来是写我们的action:
function addToCart(product, quantity, unitCost) { return { type: ADD_TO_CART, payload: { product, quantity, unitCost } } } 定义监听事件，监听state的改变：
let unsubscribe = store.subscribe(() => console.log(store.getState()));
向store添加数据：
store.dispatch(addToCart('Coffee 500gm', 1, 250));store.dispatch(addToCart('Flour 1kg', 2, 110));store.dispatch(addToCart('Juice 2L', 1, 250)); 接下是取消监听：
unsubscribe();
下面是整个index.js文件：
// src/index.jsimport { 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的一个工作流程是：(action)发送请求-->传入到(store)-->(Reducers)指定了应用状态的变化如何响应 actions 并发送到 store 的这样看是不是发现index.js的代码很多很复杂，那如何组织Redux代码呢？先休息一会