react系列(五)在React中使用Redux
阿新 • • 發佈:2018-11-11
上一篇展示了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。
感謝閱讀。