react-redux

最新推荐文章于 2024-11-07 10:51:31 发布

join8

最新推荐文章于 2024-11-07 10:51:31 发布

阅读量266

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_29849641/article/details/73647680

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍React-Redux如何封装Redux流程以适配React组件结构。通过Provider组件使子组件获取store，利用connect方法实现状态和操作的映射，以及组件更新的优化。

react-redux,是对redux流程的一种封装，使其可以适配与react的代码结构。

react-redux首先提供了一个Provider，可以将从createStore返回的store放入context中，使子集可以获取到store并进行操作；

<Provider store={store}>
{() => <App />}
</Provider>

其次react-redux提供了connect方法，将原始根节点包装在Connect下，在Connect中的state存储不可变对象，并将state对象中的props和store中的dispatch函数传递给原始根节点；

Connect在componentDidMount中，给store添加listener方法(handleChange)，每当store中的dispatch被调用时执行handleChange；handleChange会去修改state中的porps，使原始根节点重新render；并且Connect已经在shouldComponentUpdate实现了PureRender功能。

handleChange更新state中的props逻辑主要由3个函数构成，这3个函数都由connect方法传入;

connect(mapStateToProps, mapDispatchToProps, mergeToProps)(App);
第一个函数接收store中state和props，使页面可以根据当前的store中state和props返回新的**stateProps**;
第二个函数接收store中的dispatch和props，使页面可以复写dispatch方法，返回新的**dispatchProps**；

第三个函数接收前2个函数生成的**stateProps**和**dispatchProps**，在加上**原始的props**，合并成新的props，并传给原始根节点的props。

流程图