恩施网站设计/seo系统培训课程

目录

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)

4.3案例分析