react系列（五）在React中使用Redux

上一篇展现了Redux的基本使用，能够看到Redux很是简单易用，不限于React，也能够在Angular、Vue等框架中使用，只要须要Redux的设计思想的地方，就可使用它。
这篇主要讲解在React中使用Redux，首先是安装。

安装React Redux

yarn add redux
yarn add react-redux

有两个概念：
1.容器组件（Container Components）
2.展现组件（Presentational Components）

展现组件

• 更关注数据展现，因此会写一些DOM嵌套和CSS
• 一般不依赖Redux，直接从props中获取数据
• 一般没有state，偶尔会用state来保存一些展现状态，如class等
• 交互也经过props回调发起，不直接发起action

容器组件

• 一般做为数据源，作数据分发工做
• 依赖Redux
• 经过和store交互进行数据变动
• 经过react-redux生成

在咱们的项目中，通常来讲，会编写不少展现组件，少许的容器组件来包裹这些展现组件。
接下来写一个简单的计数器应用，先来划分容器组件和展现组件。
计数器有三个按钮，加、减、重置；一个展现区。
因为按钮既要触发action，又要负责展现，因此须要作成混合组件。
先来编写展现组件，就是显示一下当前计数。

import React from 'react';
const Counter = ({
    count
}) => (
    <p>当前计数为：<span style={{color: 'red'}}>count</span></p>
)

export default Counter;

通常来讲，容器组件就是经过store.subscribe传入回调，订阅store的变化，再去把值经过props传入各个组件中。
在react-redux中实现了connect方法，它生成一个高阶组件，就是前面提到的容器组件。这个方法作了性能优化避免没必要要的重复渲染，建议使用该方法。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps是一个Function，用来监听Redux Store的变化，将store的值，映射为对应的props属性。

const mapStateToProps = ({count}) => {count};
// 或者
const mapStateToProps2 = (state) => {
    count: state.count
}

接下来生成一个容器组件。

import { connect } from 'react-redux';

const ConnectCounter = connect(
  mapStateToProps
)(Counter);

export default ConnectCounter;

接下来是按钮组件,按钮组件既须要展现，又有数据交互，作成混合组件。
因为，须要dispatch，因此须要给connect传入第二个参数。
mapDispatchToProps能够是Object或者Function。用来将dispatch映射到props上。

const mapDispatchToProps = dispatch => {
    return {
        plus: () => dispatch({
            type: 'PLUS'
        })
    }
}
// 或者结合上篇提到的bindActionCreators合成一个对象
function plus() {
  return {
    type: "PLUS"
  };
}

function minus() {
  return {
    type: "MINUS"
  };
}

const mapDispatchToProps2 = dispatch => {
    return bindActionCreators({ plus, minus }, dispatch)
}

import React from 'react';

let Button = ({plus, minus}) => {
    return (
        <>
            <button onClick={plus}>{'plus'}</button>
            <button onClick={minus}>{'minus'}</button>
        </>
    )
};

Button = connect(()=>{}, mapDispatchToProps2)(Button);
export default Button;

最后，提供一个Provider用来提供全局store。完整例子在这里-codesandbox。
感谢阅读。