React-Redux 源码解析系列 -- React-Redux的作用
React-Redux 源码解析系列 -- React-Redux的作用
本文作者：IMWeb 黄qiong 原文出处：IMWeb社区 未经同意，禁止转载
前面的章节讲完了redux的部分，又已经有了react,那为什么还需要有React-Redux呢？这个React-Redux 又帮助我们做了什么呢？
context 跟 store
先来想一个问题，如果光使用react，有时候会遇到一个组件的状态要在另一个组件中用到，这时候就需要把这个状态提升。但是我们不能没完没了的提升呀，所以react就有了一个context，这样整个app都可以访问到这个值。
但是用context是不安全的，因为任何组件都可以改变它。怎么办？
方法
所以我们需要redux这个专业的状态管理框架来帮忙，而redux的核心就是发明了store，通过dispatch一个action 来改变store里的值，如果用redux来管理我们的状态，就可以解决上述问题~
谁来连接react, redux? 这时候react-redux就闪闪出现了，它的作用就是连接react跟redux。
how to
1、在最顶层的react组件里，将redux的store定义为context，这样所有的子组件通过this.context.store 都可以共享store里的状态。
static childContextTypes = {
store: PropTypes.object
}
getChildContext () {
return { store }
}2、每个需要访问store的子组件里，在componentWillMount的时候做两件事
- 通过this.context.store拿到自己想要的值，然后setState保存这个状态。
- 通过store的subscribe 订阅listener-- render function,在每次状态更新的时候 都会重新渲染。
栗子：
static contextTypes = {
store: PropTypes.object
}
constructor () {
super()
this.state = { themeColor: '' }
}
componentWillMount () {
this._updateThemeColor()
store.subscribe(() => this._updateThemeColor())
}
_updateThemeColor () {
const { store } = this.context
const state = store.getState()
this.setState({ themeColor: state.themeColor })
}到这一步，可以说react，跟redux就联系上了，实际就是context跟store的结合。
但是目前的代码还是有问题的：
- 所有需要获取状态的子组件都需要重复上面的逻辑，显然非常麻烦
- 子组件对于context的依赖太强，造成可复用性差，如果我要在没有context的地方使用它，就用不了了
首先 说第一个问题： 这个问题可以通过把共同的逻辑都放在高阶组件里解决。高阶组件新包装的组件跟原来的组件通过props传递信息。
第二个问题： 说解决方法之前，先来探讨一下什么是可复用性高的组件：一个组件只依赖于传入的props还有自身的State来渲染，而不依赖与外部的任何数据，也就是我们常说的纯组件（也叫Dumb Component），它除了给它传的props，对外面的数据都漠不关心，给它什么，它就渲染什么。
注：所以在写组件的时候，也要多写Dumb component哦~
说到这里，思路就变得清晰了，我们要的就是通过高阶组件去获取store里的值，通过props传给下面的子组件。
讲到这里，就可以回答开篇的问题了~
其实React-Redux 提供了两个接口，provider跟connect
- provider是帮助我们把store设置为childContext的
- connect就是高阶组件，它负责去获取store的值，通过props传给下面的子组件，同时订阅组件的渲染事件
最后，本文其实是参考文档的链接做的一个总结，想去看完整版可以戳下面~