REACT-REDUX用法详解

建议学习顺序：FLUX->REDUX->REACT-REDUX，否则可能理解本文有困难。

REACT-REDUX是REDUX官方的与REACT绑定的REDUX版本，用于辅助在REACT中使用REDUX。

REACT-REDUX的API包括REACT COMPONENT(PROVIDER)和一个CONNECT（高阶方法）

分别介绍一下：

1.PROVIDER，它是STORE的提供者，我们把原有的组件树的根节点包裹在PROVIDER中，这样整个树上的节点都可以通过CONNECT获取STORE。

这是用来解决什么问题呢？

我们知道一个组件要想获得STORE的数据，传统方法就是从父组件一级一级传下来PROPS,但是一旦组件树的深度增加，第N层要获得的属性，前N-1层都要传过来，每次修改都要改很多次，所以我们希望每个节点能够直接访问STORE的数据。

写法实例：

ReactDOM.render(

<Provider store={store}>

<RootComponent />

</Provider>,

rootElement

)

2.CONNECT,connect是用来连接STORE和组件的方法。

写法实例：

function mapStateToProps(state){

//返回数据属性，从全局的状态数据中挑选计算得到展示组件所需要的数据，是从STATE到组件属性的映射。

}

function mapDispatchToProps(dispatch){

//返回回调函数属性，即生成行为属性，如onDoSth这样的回调。

}

export default connet(mapStateToProps,mapDispatchToProps)(Counter);

connet让组件COUNTER能够连接STORE。

这是一种高阶组件的写法。（ENHANCER）

所谓高阶组件，是指这样一种函数：它接收一个已有的组件（展示组件）作为参数，把这个已有组件封装进一个新的组件并返回这个新的组件（容器组件）。

什么是展示组件？

1.它只关心应用的外观，可能会包含展示组件或容器组件，还会包含属于组件自己的DOM节点与样式信息。

2.允许this.props.children嵌套

3.对应用的其余部分没有依赖

4.不会指定数据如何加载或改变

5.只通过PROPS获取数据与行为

6.极少包含自身的状态，如果有，一定是界面状态而非数据。

7.一般都写成函数式组件，除非需要包含状态、生命周期、性能优化

8.典型例子（PAGE. SIDEBAR STORY USERINFO LIST）

容器组件

1.关心应用如何工作

2.可能会包含展示组件或容器组件，但通常不包含DOM节点，一定不包含样式信息

3.为展示组件或其他容器组件提供数据与行为

4.调用FLUX ACTION并将其作为提供给展示组件的回调函数

5.有状态

6.往往无需手工实现而是通过高阶组件生成，如CONNECT

7.典型例子（USERPAGE/FOLLOWERSSIDEBAR STORYCONTAINER）

————出自《REACT全栈》一书

PROVIDER通过GETCHILDCONTEXT方法将STORE提供给它的子孙节点，ENHANCER通过组件的CONTEXT属性获取STORE对象，从而调用SUBSCRIBE/GETSTATE、dipacth等方法。

我们为什么要联合PROVIDER和CONNECT来给组件访问STORE的能力呢？为什么不直接把STORE给CONNET呢？

这是因为，如果我们直接把STORE传给组件，那在组件复用的时候，我们就要修改组件传入的参数。而使用PROVIDER，我们只需要修改根节点传入的STORE就可以了，不需要修改每个被复用的组件。

为什么要把STATE的PROPS和DISPATCH区分开呢？这主要是考虑到性能为题，REACT-REDUX把二者分开方便在CONNECT内部对其做性能优化。