Redux中的store、action和reducer

目录

 

1.store

2.action

3.reducer

4.用通俗的例子解释它们之间的关系

4.1redux三剑客

4.2现实世界和物流中心的管道 connect(react组件和redux的对接)

4.3案例分析

---

1.store

store的结构图

store其实是一个虚拟概念，由dispatcher  reducer state构成。

1. dispatcher是一个函数，用于广播action，将action传给所有的reducer。reducer处理它，然后对state进行更新。
2. reducer是一个函数，用于通过action对state进行更新。
3. state是一个对象，对数据进行储存。

创建一个store使用createStore(reducer, [initialState], enhancer)函数。

例如：const store = createStore(reducer);

store中常用的3个方法：

1. getState()  用于获取state
2. dispatch(action) 用于将action广播给reducer
3. subscribe(callBack) 当state被更新时，那么调用callBack回调函数。

2.action

store.dispatch(action)

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

举个例子

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

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

3.reducer

reducer(state,action)

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，它有两个参数，第一个是state(有一个默认值），第二个是一个action。

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

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

state + action = newState

 

4.用通俗的例子解释它们之间的关系

4.1redux三剑客

store ----->物流仓库中心

store，把它想象成一个物流仓库中心，数据(state)就是一个个包裹。

action ---->包裹的包装 store.dispatch(action)

为了便于对包裹的管理，需要给它们进行包装store.dispatch(action)，比如打上标签action.type，标明这是联邦快递，还是申通快递，你是要寄快递还是退快递，要发到江浙沪，还是发到偏远地带…那对于一个新来的包裹，首先要做的第一步就是包装，这一步由action完成。

reducer---->根据包裹的标签做针对性的处理 reducer(state,action)

圆通的快递员处理圆通快递，申通的快递员处理申通的快递，这一步，由reducer完成，他根据action.type做针对性的处理。如果我想向物流仓库中心发一个快递，就通过store的dispatch方法，先给包裹包装，然后丢到物流中心由一个个快递员(reducer)进行处理。

4.2现实世界和物流中心的管道 connect(react组件和redux的对接)

connect(
	mapStateToProps,
	mapDispatchToProps,
)(App)

onnect：作为现实世界和物流中心的管道，他能实时得知任何一个包裹的物流进度，这个包裹是在揽件，还是停留在某个地方。这些信息connect通过一个函数mapStateToProps()作为参数，在这个函数中有一个state的参数，这个参数就存放着整个物流中心包裹实时物流情况，非常宝贵。那么就可以对这个信息做各种处理mapDispatchToProps，比如某人发了一个圆通快递，从上海发往北京，那mapStateToProps()就可以针对这个包裹的state进行实时更新，他的每一次更新，都可以通过单向数据流的方式传递给那个发快递的人(子组件)。

4.3案例分析

比如有这样一个需求，北京想要得知整个中国的天天快递物流情况，该怎么办？

很简单，通过redux进行统一管理：

整个中国每一个人发包裹都要通过唯一的物流中心store，这个物流中心暴露一个dispatch方法store.dispatch(action)，用于发快递，比如你要寄天天快递去北京，你就要这样dispatch(tiantian({target:"beijing",msg:'神秘大礼包'}))，将快递丢到物流中心，物流中心的天天快递员(reducer)便会对其进行处理。

那么作为掌握第一手宝贵信息的connect，会实时得知来了一个快递，mapStateToProps()通过对state进行分析发现。哎嘿，是天天快递，于是更新了天天快递的物流信息mapDispatchToProps，最后组件通过props的方式传递给北京，于是北京就能实时掌握全国的天天快递物流信息了。