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

標籤：行資料   按鈕組   變更   bind   imp   簡單   效能最佳化   ops   合成   

上一篇展示了Redux的基本使用，可以看到Redux非常簡單易用，不限於React，也可以在Angular、Vue等架構中使用，只要需要Redux的設計思想的地方，就可以使用它。
這篇主要講解在React中使用Redux，首先是安裝。

安裝React Redux

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

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