react-redux

## 4.求和案例_react-redux基本使用

            (1).明确两个概念：

                        1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。

                        2).容器组件：负责和redux通信，将结果交给UI组件。

            (2).如何创建一个容器组件————靠react-redux 的 connect函数

                            connect(mapStateToProps,mapDispatchToProps)(UI组件)

                                -mapStateToProps:映射状态，返回值是一个对象

                                -mapDispatchToProps:映射操作状态的方法，返回值是一个对象

            (3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

            (4).备注2：mapDispatchToProps，也可以是一个对象

## 5.求和案例_react-redux优化

            (1).容器组件和UI组件整合一个文件

            (2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。

            (3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。

            (4).mapDispatchToProps也可以简单的写成一个对象

            (5).一个组件要和redux“打交道”要经过哪几步？

                            (1).定义好UI组件---不暴露

                            (2).引入connect生成一个容器组件，并暴露，写法如下：

                                    connect(

                                        state => ({key:value}), //映射状态

                                        {key:xxxxxAction} //映射操作状态的方法

                                    )(UI组件)

                            (4).在UI组件中通过this.props.xxxxxxx读取和操作状态

## 6.求和案例_react-redux数据共享版

            (1).定义一个Pserson组件，和Count组件通过redux共享数据。

            (2).为Person组件编写：reducer、action，配置constant常量。

            (3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，

                    合并后的总状态是一个对象！！！

            (4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

## 7.求和案例_react-redux开发者工具的使用

            (1).yarn add redux-devtools-extension

            (2).store中进行配置

                    import {composeWithDevTools} from 'redux-devtools-extension'

                    const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

## 8.求和案例_react-redux最终版

            (1).所有变量名字要规范，尽量触发对象的简写形式。

            (2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer