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。
感謝閱讀。