react-基础操作（7）react-redux和异步action

源码在我的github地址react-tuts-05

在线写js代码

提供免费的在线REST API

React-redux流程

1. npm i react-redux –save

2. 创建store，createStore是redux提供的一个用于创建store的方法；引入合并后的reducer；createStore的第一个参数必须输一个reducer，如果是多个，要在reducers目录下先试用combineReudcer进行合并之后再导出。

3. 在实际的项目中，由于只有单一的store，但是状态会有很多分类，所以我们需要划分reducer，但是createStore的参数只接收一个reducer，所以，redux比较聪明的提供了一个用于合并多个reducer的方法。

   导出后在外部就可以通过store.getState().cart来获取cartReducer里面的state

4. 为了避免actionType重复，一般会把actionType放在一个文件里统一进行管理，也可以避免写错actionType。

   创建购物车的reducer，reducer的固定写法是两个参数，第一个state并且有初始值，第二个是action。根据不同的action.type，做不同的处理，每次返回一个新的state，返回的类型一样。一定要有default，当actionType不对的时候，不作任何处理，返回上一次的default。

5. action有两种写法：第一种写成一个对象，是一个标准的action，但是传递不了参数。实际情况常用是使用actionCreator，它是一个方法返回一个对象，这个对象才是真正的action。

6. Provider是react-redux提供的一个组件，一般直接把这个组件放在应用程序的最顶层，这个组件必须有一个store属性，这个store属性的值就是创建的store。只要在最外层包裹了这个Provider，那么所有后代组件都可以使用Redux.connect作连接。

7. connect方法执行之后是一个高阶组件，导入actionCreators；connect方法有四个参数，常用的就是前面两个。第一个参数是mapStateToProps，作用是从store注入到当前组建的props上

   第二个参数可以使mapDispatchToProps，这个得主要作用是把action生成的方法注入到当前组件的props

   但是第二个参数可以直接传递一个对象，这里的对象就是actionCreators，只要传入了actionCreators，在组件内部通过this.props.actionCreator来调用，这样的话，在调用之后，actionCreator会自动帮你把她内部的action dispatch出去。

   PS：此处还可以用装饰器模式。
   
   
   
   

异步action

普通

actionCreator =>自动dispatch(actionCreator()) => reducer =>store => view

异步

actionCreator =>middleware处理生成新的action => 手动dispatch(action) => reducer =>store

npm install –save redux-thunk

修改store.js

export default createStore(
    rootReducer,
    applyMiddleware(thunk)
    )

修改action具体的组件

export const decrementAsync =id =>dispatch =>{
        setTimeout(()=>{
            dispatch(decrement(id))
        },2000)
}

关于middleware

标准的redux工作模型

这里借用blog的发布流程来理解建立一个react-redux的过程。个人理解：

store.js=>容器组件和展示组件=>reducers=>actions=>完善reducers=>编写根目录下index.js

• 在过程中发现下拉菜单的dot属性不能及时更新，发现是因为之前把下拉菜单写成menu数组，如果想实时更新的话需要把他改成函数。

赏

谢谢你的关注

支付宝

微信

• 本文作者： Raphael_Li
• 本文链接： https://lifei-2019.github.io/react9/
• 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！