一个组件如果使用了仓库的数据,那么就可以将这个组件拆分成UI组件与容器组件两部分。
UI与容器的关系是:容器包装UI
使用步骤:
1. 先安装 react-redux
2. 不需要在所有组件文件中引入 store 了,只需要在项目的最外层引入一次 store 。并通过 react-redux 的 Provider 组件传递进入即可。
3. 哪个组件需要使用仓库的数据,就用 react-redux 的 connect() 高阶函数对哪个组件进行包装。返回的是一个容器组件
connect(mapStateToProps, mapDispatchToProps)(UI组件)
mapStateToProps 处理仓库的 state 数据给到 UI组件的 props 上面
mapDispatchToProps 处理仓库的 dispatch 数据给到 UI组件的 props 上面
一、mapStateToProps(state, ownProps)
1. 是个函数,会自动接收到 仓库的 state 数据。
2. 需要返回一个对象,返回的对象就是 UI组件的 一部分 props 数据
3. 仓库的数据如果发生变化,这个函数会重新执行。
二、mapDispatchToProps(state, ownProps)
1. 是个函数,会自动接收到 仓库的 dispatch 方法
2. 需要返回一个对象,返回的对象就是 UI组件的 一部分 props 数据
1. 还可以是个对象