Action/Reducer/Store

首先，先看看第一張圖，圖中展示了Redux的單向數(shù)據(jù)流，以及Action、Reducer和Store這三個核心概念。

下面就圍繞上圖，非別介紹Action、Reducer和Store這三個概念。

Action和Action Creator

Action是一個對象，用來代表所有會引起狀態(tài)（state）變化的行為（例如服務(wù)端的響應(yīng)，頁面上的用戶操作）。

假如我們要實(shí)現(xiàn)一個任務(wù)管理系統(tǒng)，那么添加任務(wù)的Action對象就會是下面的形式：

{type: 'ADD_TASK',name: 'Read ES6 spec',category: 'Reading' }

Action對象是行為的描述，一般都會包含下面的信息：

• 一個字符串類型的type字段來表示將要執(zhí)行的動作
• 需要傳遞給應(yīng)用的其他數(shù)據(jù)信息（例子中的name和category），數(shù)據(jù)形式用戶可以自定義

Action通過Action創(chuàng)建函數(shù)（Action Creator）來創(chuàng)建，Action Creator是一個函數(shù)，最終返回一個Action對象。

對于添加任務(wù)這個行為，對應(yīng)的Action Creator如下：

function addTask(name, category) {return {type: ADD_TASK,name,category}; }

Reducer

Action對象僅僅是描述了行為的相關(guān)信息，至于如何通過特定的行為來更新state，就需要看看Reducer了。

關(guān)于Reducer，最簡單的描述就是:

• Reducer是一個函數(shù)
• 該函數(shù)接收兩個參數(shù)，一個舊的狀態(tài)previousState和一個Action對象
• 返回一個新的狀態(tài)newState

根據(jù)上面的描述，Reducer函數(shù)就可以表示為：

(previousState, action) => newState

Reducer函數(shù)的形式通常如下：

function reducer(state = [], action) {// 處理不同action的代碼switch (action.type) {case SPECIAL_ACTION:// 根據(jù)SPECIAL_ACTION action更新state// 返回新的statedefault:return state} }

Store

Actions描述了"what happened"的事實(shí)，Reducers則根據(jù)這些actions來更新state，而Store則是Actions和Reducers連接在一起的對象。

Store是Redux中數(shù)據(jù)的統(tǒng)一存儲，維護(hù)著state的所有內(nèi)容，所以Store的主要功能就是：

• 維護(hù)應(yīng)用的state內(nèi)容
• 提供getState()方法獲取 state
• 提供dispatch(action)方法更新 state
• 提供subscribe(listener)方法注冊監(jiān)聽器

看到Store提供的方法，就可以把Action、Reducer和Store聯(lián)系在一起了：

Store通過dispatch(action)方法來接收不同的Action

根據(jù)Action對象的type和數(shù)據(jù)信息，Store對象可以通過Reducer函數(shù)來更新state的內(nèi)容

?

Middleware

下面就來看看第二張圖，跟第一張圖的差別不大，只是增加了中間件（Middleware）來處理Action。

在Redux中，Middlerwares主要的作用就是處理Action，Redux中的Action必須是一個plain object。但是為了實(shí)現(xiàn)異步的Action或其他功能，這個Action可能就是一個函數(shù)，或者是一個promise對象。這是就需要中間件幫助來處理這種特殊的Action了。

也就是說，Redux中的Middleware會對特定類型action做一定的轉(zhuǎn)換，所以最后傳給reducer的action一定是標(biāo)準(zhǔn)的plain object。

針對Action的特征，Reudx Middleware可以采取不同的操作：

• 可以選擇傳遞給下一個中間件，如：next(action)
• 可以選擇跳過某些中間件，如：dispatch(action)
• 或者更直接了當(dāng)?shù)慕Y(jié)束傳遞，如：return。

Redux中常用的中間件：

• redux-thunk：action可以是一個函數(shù)，用來發(fā)起異步請求。
• redux-promise：action可以是一個promise對象，用來更優(yōu)雅的進(jìn)行異步操作。
• redux-logger：action就是一個標(biāo)準(zhǔn)的plain object，用來記錄action和nextState的。

?

react-redux

經(jīng)過前面的介紹，我們已經(jīng)看到了Redux中的一些核心概念。Redux跟React沒有直接的關(guān)系，本身可以支持React、Angular、Ember等等框架。

通過react-redux這個庫，可以方便的將react和redux結(jié)合起來：react負(fù)責(zé)頁面展現(xiàn)，redux負(fù)責(zé)維護(hù)/更新數(shù)據(jù)狀態(tài)。

到這里，第三張圖就展示了react-redux這個庫的工作原理，react和redux是怎么聯(lián)系到一起的。

react-redux中提供了兩個重要功能模塊Provider和connect，這兩個模塊保證了react和redux之間的通信，下面就分別看看這兩個模塊。

Provider

通過Provider的代碼可以看到，Provide本質(zhì)上是一個react組件。

export default class Provider extends Component {getChildContext() {return { store: this.store }}constructor(props, context) {super(props, context)this.store = props.store}render() {const { children } = this.propsreturn Children.only(children)} }

Provider組件主要用到了react通過context屬性，可以將屬性(props)直接給子孫component，無須通過props層層傳遞，從而減少組件的依賴關(guān)系。

connect

connect方法的主要作用就是讓Component與Store進(jìn)行關(guān)聯(lián)， Store的數(shù)據(jù)變化可以及時通知Views重新渲染。

任何一個通過connect()函數(shù)處理過的組件都可以得到一個dispatch方法作為組件的props，以及得到全局state中的所有內(nèi)容。

通過源碼]可以看到，connect函數(shù)運(yùn)行后，會返回一個wrapWithConnect函數(shù)，該函數(shù)可以接收一個react組件，然后返回一個經(jīng)過處理的Connect組件。

return function wrapWithConnect(WrappedComponent) {class Connect extends Component {constructor(props, context) {// 從祖先Component處獲得storethis.store = props.store || context.storethis.stateProps = computeStateProps(this.store, props)this.dispatchProps = computeDispatchProps(this.store, props)this.state = { storeState: null }// 對stateProps、dispatchProps、parentProps進(jìn)行合并this.updateState()}shouldComponentUpdate(nextProps, nextState) {// 進(jìn)行判斷，當(dāng)數(shù)據(jù)發(fā)生改變時，Component重新渲染if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {this.updateState(nextProps)return true}}componentDidMount() {// 改變Component的statethis.store.subscribe(() = {this.setState({storeState: this.store.getState()})})}render() {// 生成包裹組件Connectreturn (<WrappedComponent {...this.nextState} />)}}Connect.contextTypes = {store: storeShape}return Connect; }

?

詳細(xì)內(nèi)容和demo

文中很多Redux的概念都是進(jìn)行了簡單的介紹，更多詳細(xì)的介紹可以參考，GitHub地址：WilberTian/StepByStep-Redux

• 01.Action.md
• 02.Reducer.md
• 03.Store.md
• 04.Redux-data-flow.md
• 05.Middleware (part 1).md
• 05.Middleware (part 2).md
• 06.react-redux.md

每篇文章的結(jié)尾都會有一些簡單的demo 代碼，幫助理解文章中介紹的內(nèi)容。

?

總結(jié)

文中結(jié)合三張圖片介紹了Redux中的一些核心概念，以及React和Redux之間通過react-redux這個庫進(jìn)行交互。

更多詳細(xì)的內(nèi)容，已經(jīng)整理到了GitHub上了（WilberTian/StepByStep-Redux），通過這些介紹以及demo的運(yùn)行結(jié)果，一定能對Redux有一個比較基本的認(rèn)識。

轉(zhuǎn)載于:https://www.cnblogs.com/axl234/p/5729072.html

總結(jié)

以上是生活随笔為你收集整理的Redux中的重要概念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。