React和Redux的连接react-redux - 简书
React和Redux的连接react-redux
之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。
之前仅通过Redux文档来了解react-redux，在一段时间的实践后准备翻一翻源代码，顺便做些相关的总结。我看的代码的npm版本为v4.0.0，也就是说使用的React版本是0.14.x。
react-redux提供两个关键模块：Provider和connect。
Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做，将store放在context里，是为了给下面的connect用的。
这个是Provider的使用示例：
// config app root
const history = createHistory()
const root = (
&Provider store={store} key="provider"&
&Router history={history} routes={routes} /&
&/Provider&
ReactDOM.render(
document.getElementById('root')
这个模块是算是真正意义上连接了Redux和React，正好它的名字也叫connect。
先考虑Redux是怎么运作的：首先store中维护了一个state，我们dispatch一个action，接下来reducer根据这个action更新state。
映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。
好了，详细看看connect这个模块做了什么。先从它的使用来说，它的API如下：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps是一个函数，返回值表示的是需要merge进props的state。默认值为() =& ({})，即什么都不传。
(state, props) =& ({
}) // 通常会省略第二个参数
mapDispatchToProps是可以是一个函数，返回值表示的是需要merge仅props的actionCreators，这里的actionCreator应该是已经被包装了dispatch了的，推荐使用redux的bindActionCreators函数。
(dispatch, props) =& ({ // 通常会省略第二个参数
...bindActionCreators({
...ResourceActions
}, dispatch)
更方便的是可以直接接受一个对象，此时connect函数内部会将其转变为函数，这个函数和上面那个例子是一模一样的。
mergeProps用于自定义merge流程，下面这个是默认流程，parentProps值的就是组件自身的props，可以发现如果组件的props上出现同名，会被覆盖。
(stateProps, dispatchProps, parentProps) =& ({
...parentProps,
...stateProps,
...dispatchProps
options共有两个开关：pure代表是否打开优化，详细内容下面会提，默认为true，withRef用来给包装在里面的组件一个ref，可以通过getWrappedInstance方法来获取这个ref，默认为false。
connect返回一个函数，它接受一个React组件的构造函数作为连接对象，最终返回连接好的组件构造函数。
然后几个问题：
React组件如何响应store的变化？
为什么connect选择性的merge一些props，而不是直接将整个state传入？
pure优化的是什么？
我们把connect返回的函数叫做Connector，它返回的是内部的一个叫Connect的组件，它在包装原有组件的基础上，还在内部监听了Redux的store的变化，为了让被它包装的组件可以响应store的变化:
trySubscribe() {
if (shouldSubscribe && !this.unsubscribe) {
this.unsubscribe = this.store.subscribe(::this.handleChange)
this.handleChange()
handleChange () {
this.setState({
storeState: this.store.getState()
但是通常，我们connect的是某个Container组件，它并不承载所有App state，然而我们的handler是响应所有state变化的，于是我们需要优化的是：当storeState变化的时候，仅在我们真正依赖那部分state变化时，才重新render相应的React组件，那么什么是我们真正依赖的部分？就是通过mapStateToProps和mapDispatchToProps得到的。
具体优化的方式就是在shouldComponentUpdate中做检查，如果只有在组件自身的props改变，或者mapStateToProps的结果改变，或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true，检查的方式是进行shallowEqual的比较。
所以对于某个reducer来说：
export default (state = {}, action) =& {
return { ...state } // 返回的是一个新的对象，可能会使组件reRender
// return state // 可能不会使得组件reRender
另外在connect的时候，要谨慎map真正需要的state或者actionCreators到props中，以避免不必要的性能损失。
最后，根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法：
state =& ({
user: state.user,
resource: state.resource
dispatch =& ({
...bindActionCreators({
loadResource: ResourceActions.load
}, dispatch)
export default class Main extends Component {
OK，结束了。react redux 某个state变化之后 如何触发一些操作? - 知乎113被浏览9187分享邀请回答72 条评论分享收藏感谢收起ReactJS（7）
原文链接：
之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。
之前仅通过Redux文档来了解react-redux，在一段时间的实践后准备翻一翻源代码，顺便做些相关的总结。我看的代码的npm版本为v4.0.0，也就是说使用的React版本是0.14.x。
react-redux提供两个关键模块：Provider和connect。
Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做，将store放在context里，是为了给下面的connect用的。
这个是Provider的使用示例：
// config app root
const history = createHistory()
const root = (
store={store} key=&provider&&
history={history} routes={routes} /&
ReactDOM.render(
document.getElementById('root')
这个模块是算是真正意义上连接了Redux和React，正好它的名字也叫connect。
先考虑Redux是怎么运作的：首先store中维护了一个state，我们dispatch一个action，接下来reducer根据这个action更新state。
映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。
好了，详细看看connect这个模块做了什么。先从它的使用来说，它的API如下：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps是一个函数，返回值表示的是需要merge进props的state。默认值为() =&
({})，即什么都不传。
(state, props) =& ({
mapDispatchToProps是可以是一个函数，返回值表示的是需要merge仅props的actionCreators，这里的actionCreator应该是已经被包装了dispatch了的，推荐使用redux的bindActionCreators函数。
(dispatch, props) =& ({
...bindActionCreators({
...ResourceActions
}, dispatch)
更方便的是可以直接接受一个对象，此时connect函数内部会将其转变为函数，这个函数和上面那个例子是一模一样的。
mergeProps用于自定义merge流程，下面这个是默认流程，parentProps值的就是组件自身的props，可以发现如果组件的props上出现同名，会被覆盖。
(stateProps, dispatchProps, parentProps) =& ({
...parentProps,
...stateProps,
...dispatchProps
options共有两个开关：pure代表是否打开优化，详细内容下面会提，默认为true，withRef用来给包装在里面的组件一个ref，可以通过getWrappedInstance方法来获取这个ref，默认为false。
connect返回一个函数，它接受一个React组件的构造函数作为连接对象，最终返回连接好的组件构造函数。
然后几个问题：
React组件如何响应store的变化？为什么connect选择性的merge一些props，而不是直接将整个state传入？pure优化的是什么？
我们把connect返回的函数叫做Connector，它返回的是内部的一个叫Connect的组件，它在包装原有组件的基础上，还在内部监听了Redux的store的变化，为了让被它包装的组件可以响应store的变化:
trySubscribe() {
if (shouldSubscribe && !this.unsubscribe) {
this.unsubscribe = this.store.subscribe(::this.handleChange)
this.handleChange()
handleChange () {
this.setState({
storeState: this.store.getState()
但是通常，我们connect的是某个Container组件，它并不承载所有App state，然而我们的handler是响应所有state变化的，于是我们需要优化的是：当storeState变化的时候，仅在我们真正依赖那部分state变化时，才重新render相应的React组件，那么什么是我们真正依赖的部分？就是通过mapStateToProps和mapDispatchToProps得到的。
具体优化的方式就是在shouldComponentUpdate中做检查，如果只有在组件自身的props改变，或者mapStateToProps的结果改变，或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true，检查的方式是进行shallowEqual的比较。
所以对于某个reducer来说：
export default (state = {}, action) =& {
return { ...state }
另外在connect的时候，要谨慎map真正需要的state或者actionCreators到props中，以避免不必要的性能损失。
最后，根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法：
state =& ({
user: state.user,
resource: state.resource
dispatch =& ({
...bindActionCreators({
loadResource: ResourceActions.load
}, dispatch)
export default class Main extends Component {
OK，结束了。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：169695次
积分：2164
积分：2164
排名：第17463名
原创：36篇
转载：103篇
评论：30条
本博客从2015年5月开始，虽然写的东西都比较基础，但还是希望能帮助一些人，另一方面也算是对自己学习的一种监督吧！React，关于redux的一点小见解
React，关于redux的一点小见解
高科技的世界
最近项目做多页面应用使用到了，react ＋ webpack + redux + antd去构建多页面的应用，本地开发用express去模拟服务端程序（个人觉得可以换成dva）.所以在这里吐槽一下我自己对于redux的一些见解。Redux是状态管理的服务，可以当作是mvc中的controller层，你也可以把它认为是mvvm中vm层。虽然它本身受到Flux的影响很大，但是它的核心概念缺很简单，就是Redue也就是ES5中Array.prototype.reduce，这个reduce用于合并数组的元素，例：Redux认为，一个应用程序中，所有的应用模块之间需要共享访问的数据，都应该在Store的State里面。这点和React的state和props的概念是一致的。外面的props尽量不去改变，而改变的只是内部的状态state,而有shouldComponentUpdate这个生命周期函数，我们可以优化react.但是有一个原则是没有改变的，就是在你不知道你是否需要redux的时候，你肯定是不需要它。就像Flux的作者说的那样，Flux就像眼镜，你会知道你在什么时候需要它。下面介绍一些老司机对于redux的一些使用经验：（1）你最好保证State的没个节点都是immutable的，这样确保在消费State的时候只需要进行简单的引用就可以了。从而避免Deep Equal 的遍历过程。也就是说你的state最好是键值的对象形式，避免数组形式的非state最底层值的形式。（2）reducer为纯函数，如果判断太多，可以使用combineReducers(),去组合reducer,分离reducer（3）合理管理你的state.并不需要所有的数据都在State里面，虽然这也是可以，总之一句话，合适你的才是最好的，适用需要的代码才是最好的。（4）建议所以的asyncAction都应该被管理。这很大程度上，可以提高用户体验。建议适用Promise async/await 去实现异步的管理。更多干货类文章请浏览优就业官网： /?wt.bd=qzb万阳关基金助力就业扶持计划,优惠可达千元：/zt/jyfc/?wt.bd=qzb36000端午节吃粽子福利多，领取大礼包：/zt/duanwu/?wt.bd=qzb36000
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
高科技的世界
百家号 最近更新：
简介: 用新的眼光看世界，美是一个过程，而不是目的地
作者最新文章