react系列(五)在React中使用Redux

發布日期:2019-10-10

上一篇展示了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。感謝閱讀。

甘肃11选走势图一定牛