React - 简单理解Redux的action reducer store

什么是store，如图

这就是一个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进行更新

看如下例子

  const initState = { count: 0 };
  const counter = (state = initState, action) => {
    switch (action.type) {
      case "add":
        return { count: state.count + 1 };
      case "sub":
        return { count: state.count - 1 };
      case "addAny":
        return { count: state.count + action.num };
      default:
        break;
    }
    return state;
  };

counter就一个reducer.

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

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

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

state + action = newState

 

结合起来举个栗子，如图

下方绿色是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 输出如下

 

补充一下bindActionCreators

这个函数是干啥的了？

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

看如下代码：

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

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