Redux入门教程(快速上手)_day_01

Dear 丶 2022-03-07 16:14 250阅读 0赞

接下来也只是分享一些小案例来让你好好理解该如何使用Redux  
详情具体可以参考官方文档：[https://www.redux.org.cn/][https_www.redux.org.cn]

## 学习前提 ##

开始之前确保你的设备已经安装：

*  Node.js
 *  npm或者yarn(本人自己用到的是yarn)

## 什么是Redux ##

用官方文档的话来说，就是Redux 是 JavaScript 状态容器，提供可预测化的状态管理。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。 见下图：  
![图片描述][1714319113-5c754dd31f71b_articlex]  
\---现在看可能对于刚接触者一脸蒙××，等到了我们实现了一个小demo我们再回过头来理解可能会更加清晰

## 用了会怎么样 ##

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验。总得来说就是实现项目**工程化**

本次通过一个购物车的小栗子方便来理解redux

## 配置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";  
//state:存储数据 action：容器

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

const store = createStore(reducer);//创建一个redux存储区`` ` ``  
注意这里我们起初state是没有数据的，所以要让他成为空数组

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

如果你有多个redux怎么办？我们将用到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定义一些初始数据？

我们在终端输入命令npm start或yarn start,就能看到state的输出，如下图：  
![图片描述][1024522868-5c7551fa55c9b_articlex]  
我们来定义商品的增加，删除，修改的操作(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.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会自动刷新。可以在控制台中确认新的商品已经添加了：  
![图片描述][320034579-5c7553b1dd9dd_articlex]

回头总结一下：  
redux的一个工作流程是：(action)发送请求-->传入到(store)-->(Reducers)指定了应用状态的变化如何响应 actions 并发送到 store 的

这样看是不是发现index.js的代码很多很复杂，那如何组织Redux代码呢？先休息一会

[https_www.redux.org.cn]: https://www.redux.org.cn/
[1714319113-5c754dd31f71b_articlex]: /images/20220307/4193822bc03b43adaa7e20c69fd832df.png
[1024522868-5c7551fa55c9b_articlex]: /images/20220307/a7430ea4224d4bf3ba11ab028e32c0e6.png
[320034579-5c7553b1dd9dd_articlex]: /images/20220307/21de071802f14bcfa062fa4cf479f8cd.png