React的插件库——redux

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

react-redux

react-redux这是react的一个插件库，能让我们在react中更好的使用redux；其中UI组件中不含任何的store的东西，只是用于展示页面，所有和store联系起来的操作都在容器组件中进行实现；

一、react-redux实现

一般来说，容器组件是放在一个文件名为containers的文件夹中，UI组件放在component文件夹中；UI组件写基本页面展示；在容器组件中用connect将UI组件与redux连接起来；

0. 在容器组件中引入UI组件、store、connect(react-redix)；

   connect用于连接UI组件与redux；创建并暴露容器组件，connect()()的第二个括号写UI组件的组件名；第一个括号要传入两个函数个函数；这两个函数返回的都是一个对象；

   import { connect } from 'react-redux'
   export default CountContainer = connect(mapStateToProps, mapDispatchToProps)(CountUI)
   复制代码

   • 第一个函数mapStateToProps：传递状态给UI组件；返回的对象中的key就作为传递给UI组件props的key值，value就作为传递给UI组件props的value；

     在这个函数里面调用store.getState()就可以把状态值给拿到，但是对于在容器组件中的函数，react-redux已经帮我们把状态值给传过来了，我们直接接收即可。

     function mapStateToProps(state) {
         return { count: state };
     }
     复制代码

   • 第二个函数mapDispatchToProps：传递操作状态的方法；传递给UI组件之后，直接在UI组件中调用这个函数就可以改变它的状态值了。

     function mapDispatchToProps(dispatch) {
         return {
             add: number => {
                 dispatch(createIncrementAction(number))
             }
         }
     }
     复制代码

1. 给容器组件引入store的时候，我们不直接引入，而是通过在App(父)组件中引入后，通过store={store}把store传给容器组件Count；也就是说，容器组件中的store是靠props传进去的；

   <Count store={store} />
   复制代码

总结

• 定义UI组件——不暴露
• 引入connect生成一个容器组件并暴露，connect(a,b)()
• 在UI组件中通过this.props....读取和操作状态

二、优化代码

• 优化的时候可以把UI组件和容器组件放在同一个js文件中；

简写mapDisPatchToProps

容器组件中的connect的第一个括号中是调用了两个函数，第二个函数也就是mapDisPatchToProps可以是一个对象，可以简写为下面这种方式：把这两个参数都直接写到connect当中；（此时从action.js文件中的方法定义并暴露是这样子的：export const createIncrementAction = data => ({ type: INCREMENT, data })；）相比起上面那种方式，这里不再需要传参，但是效果是一样的，这是因为react-redux已经把UI组件中传的参数传给容器组件了；

export default CountContainer = connect(
    state => ({count: state}),
    {
        add: createIncrementAction;
    }
)(CountUI)
复制代码

provider组件的使用

在使用react-redux的时候，我们需要在App组件中引入store.js文件，并且在App组件中将store传递给其他组件，组件有很多的话，我们要一个个把store传给子组件的话就很麻烦；这个时候我们就可以用到Provider组件，在index.js中（那个render App组件的文件）；引入store和Provider组件；

ReactDOM.Render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)
复制代码

这样子处理之后，App及其中的每个组件都能被传入store；