redux实现
在src目录下创建store 共享数据仓库
调用 createStore 接收一个 reducer
reducer 是一个函数(纯函数),接受 旧 state 和 action,根据不同的 Action 做出不同的操作并返回新的 state
从redux中引入 Provider ,用来包裹根组件,子组件就可以访问state
在根组件引入store,把store做为props传入到provider
在组件里通过react-redux中引入connect 连接 React 组件与 Redux Store
mapStateToProps 该参数为一个是一个函数,将store中的state绑定到props上,就可以通过this.props拿到数据(或定义该参数后组件就可以监听 Redux Store 的变化,任何时候只要store发生变化,该函数就会被调用,该函数必须返回一个纯对象,它会与组件的 props 结合)
mapDispatchToProps 通过dispatch触发action 或 把dispatch 注入到组件的props中 在需要触发 action 的地方 使用 dispath 函数 将 action发送 到 store 中的 reducer, reducer 根据 action 的 type 来决定执行什么操作,之后在store中新增一条记录(newItemId)后返回一个新的 state (里边包含Store中发生改变后的所有值),由于组件使用 connect 将自己与 Store 绑定起来,Store 中的值发生变化就会执行 mapStateToProps,将新的 state 放入组件的 props,从而引发组件的渲染。
connect( mapStateToProps , mapDispatchToProps , mergeProps , options )(放当前的组件)
redux中间件
中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。
常见的中间件:
redux-logger:提供日志输出
redux-thunk:处理异步操作
redux-promise:处理异步操作,actionCreator的返回值是promise
从redux中引入applyMiddleware,做为createStore的第二个参数,applyMiddleware('需要的中间件')
applyMiddleware的实现:这个函数其实是一个 柯里化 的函数, 柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术