React-redux终|青训营笔记

2022-08-22 66 阅读3分钟

这是我参与「第四届青训营」笔记创作活动的的第5天
接着上篇的react-redux的使用说明，本篇将进一步对redux进行完善，并且将简化redux以利于在实际项目中使用。

容器组件-Contains

容器组件的作用

所有的UI组件外都应该包裹一个容器组件，他们是父子关系
容器组件是真正和redux打交道的，里面可以随意的使用redux的api
UI组件中不能使用任何redux的api
容器组件会传给UI组件：（1）redux中所保存的状态（2）用于操作状态的方法
备注：容器给UI传递：状态、操作状态的方法，均通过props传递
容器组件可以利用connect检测redux的变化，应给每个组件匹配一个

使用容器组件

引入UI组件：import Count from '../../components/Count'\
引入connect用于连接UI组件与redux：import { connect } from 'react-redux'
引入action.js中的各种方法，用于操控组件UI
使用connect()()创建并暴露一个Count的容器组件：export default connect(mapStateProps, mapDispatchToProps)(Count);

解析mapStateProps，mapDispatchToProps

mapStateProps

mapStateProps函数的返回值作为状态传递给了UI组件中的props-状态

mapStateProps函数返回的是一个对象
返回的对象中的key作为传递给UI组件props的key，value就作为传递给UI组件props的value
mapStateProps用于传递状态
该函数可以接收到UI组件的state

// 容器直接接收到了当前的状态
// 映射状态
constmapStateProps = state=> { //--可以直接接受到UI组件的状态state
// 相当于<CountUI n=100/> -- return {n:100}
return { count:state }
}
复制代码

mapDispatchToProps

mapDispatchToProps函数的返回值作为操作状态的方法传递给UI组件中的props-操作状态的方法

操控UI组件的方法，并且会直接通知redux执行动作
mapDispatchToProps函数返回的是一个对象
返回的对象中的key作为传递给UI组件props的key，value就作为传递给UI组件props的value
mapDispatchToProps用于传递操作状态的方法

constmapDispatchToProps = dispatch=> { //--可以直接接收到redux的store.dispatch({}
return {
jia: (value) => {
// 通知redux执行加法
dispatch(createIncrement(value))
},
jian:value=>dispatch(createDecrement(value)),
jiaAsyc: (value, time) =>dispatch(createIncrementAsync(value, time))
}}
复制代码

精简版容器组件

对mapStateProps进行简化
直接写函数：state => ({ count: state.he, ren: state.person.length })
对mapDispatchToProps进行简化直接放弃手动调用dispatch,因为容器是一直在调用store的，所有可以自动调用dispatch

{
    jia: createIncrement,
    jian: createDecrement,
    jiaAsyc: createIncrementAsync,
}
复制代码

注：当容器精简后，不用再随时监听数据的变化，即不用在利用store.subscribe(）对页面进行重绘

精简版redux

无需手动给组件传递store

引入Provider: import { Provider } from'react-redux' 在index.js中：这样就不用在App.jsx中给每一个组件传递store

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

容器与UI组成一个文件

即在容器中的index.jsx里添加UI组件的内容，然后只用暴露容器组件即可，UI文件可以删除
定义好UI组件---不暴露
引入connect生成一个容器组件，并暴露，写法如下：

connect(
    state => ({key:value}), //映射状态
    {key:xxxxAction} //映射操作状态的方法
)(UI组件)
复制代码

在UI组件中通过this.props.xxxxxx读取操作状态

redux的使用基本就是这样，当组件的比较多时，我们可以考虑用redux;同时，redux封装好的组件之间的通信方式也大大的方便我们使用。