React - 简单理解Redux的action reducer store

不念不忘少年蓝@ 2022-04-15 05:59 270阅读 0赞

什么是store，如图

![20181122133223158.png][]

这就是一个store,我们可以看到由dispatcher  reducer state构成，不难发现store其实是一个虚拟概念。

dispatcher是一个函数，用于广播action,将action传给所有的reducer，reducer然后处理它，对state进行更新

reducer是一个函数，用于通过action对state进行更新

state是一个对象，对数据进行储存

通常我们通过 const store = createStore(reducer);来创建一个store

方法一：getState()  用于获取state

方法二：dispatch(action) 用于将action广播给reducer

方法三：subscribe(callBack) 当state被更新时，那么调用callBack回调函数。

先有一个印象，等一会有个例子看一下就知道了。

什么是action?

简单的说就是一种描述行为的数据结构。

举个栗子

{ type: "add" , text : "update the state"};

这个就是一个action。类型是"add",行为说明：更新state。

什么是reducer?

reducer是一个函数，用于通过action对state进行更新

看如下例子

counter就一个reducer.

reducer有俩个参数，第一个是state(有一个默认值），第二个是一个action,

reducer通过对action.type进行判断，来决定通过那种方法更新state.

注意reducer必须返回一个新的state，修改原来的state没有用。

**state + action = newState**

结合起来举个栗子，如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

下方绿色是view（一个组件）,显示有多少钱，有俩个修改钱数的button.

通过点击button产生了一个action(action里面记录你的操作）

通过dispatcher广播给reducer，reducer去更新你的state.

view（一个组件），知道自己的state被修改了，然后重新render，修改钱数。

**单向数据流。**

**state的任何修改一定是action引起的，在追踪state时，可以查找action.**

对action  reducer  store有了简单的理解了吧！

举个栗子

import React from "react";
    import ReactDOM from "react-dom";
    import { createStore, combineReducers, bindActionCreators } from "redux";
    
    import "./styles.css";
    
    function run() {
      const initState = { count: 0 };//默认初始状态
      const counter = (state = initState, action) => {
        switch (action.type) {
          case "add":// + 1
            return { count: state.count + 1 };
          case "sub":// - 1
            return { count: state.count - 1 };
          case "addAny":// + action.num
            return { count: state.count + action.num };
          default:
            break;
        }
        return state;
      };
    
      const store = createStore(counter);//生成store
    
      function addOne() {//action产生函数   返回一个add  action
        return {
          type: "add"
        };
      }
    
      function subOne() {// 返回一个sub  action
        return {
          type: "sub"
        };
      }
    
      function subAnyCount(cnt) {// 返回一个add cnt  action
        return {
          type: "addAny",
          num: cnt
        };
      }
      store.subscribe(() => {//当state被修改时，输state  需要放在dispatch前面，因为需要先监听
        console.log(store.getState());
      });
      store.dispatch(addOne());//广播add action 下面类似
      store.dispatch(subOne());
      store.dispatch(subAnyCount(6));
    }
    
    const html = (
      <div>
        <button onClick={run}> Run </button>
      </div>
    );
    ReactDOM.render(html, document.getElementById("root"));

点击button 输出如下

![20181122140915629.png][]

补充一下bindActionCreators

这个函数是干啥的了？

我们刚刚知道了，我们的action必须要通过store.dispatch出去才能被reducer接受到，上面这个函数就是为了简化这个操作。

看如下代码：

addOne = bindActionCreators(addOne, store.dispatch);
      addOne();

我们可以自己直接通过调用addOne就可以了。

[20181122133223158.png]: /images/20220415/8288a698f6754109820b116037a3bda3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220415/011122ab7560479c908c8dc742a7cac1.png
[20181122140915629.png]: /images/20220415/f78651e43b9c4df096db24a0a7f508e5.png