天天看點
傳回

ReactNative之Redux詳解

用redux有一段時間了，感覺還是有必要把其相關的知識點系統的總結一下的，畢竟好記性不如爛筆頭。上篇部落格更新了關于《ES6中的疊代器、Generator函數以及Generator函數的異步操作》的内容，該内容時saga的基礎，稍後會總結saga相關知識點。循序漸進，本篇部落客要總結的是Redux相關的内容，然後下篇部落格打算總結一下react-redux, 以及redux-thunk、redux-saga中間件。

一、Redux與iOS中的Notification的比較

Redux 的功能和作用就是讓State管理更為集中，因為在redux中所有的狀态都是存儲在Store中的，而在頁面的各個子產品中都可以去通路和修改Store中存儲的狀态值。從這一點來看，redux可以很好的解決一個頁面中多個子產品間的狀态共享的問題。

Redux這架構了解起來是比較簡單的，這個架構本身也是比較小的，涉及的API也非常少。雖然小，但小而精。使用起來還是滿順手的，大道至簡。下方是Redux中的幾個關鍵的詞及對應的功能，了解完下方的幾個關鍵詞，Redux這個架構也就大概了解了。

  • Store ： 從字面意思看，Store是存儲、儲存的意思，在 Redux 中，把相關的狀态存儲在了Store中，在Redux中Store可以看做是一個單例對象。并且Store中提供了一些API來操作這些狀态，如下所示：
    • getState : 該方法用來擷取Store中目前存儲的狀态值。
    • subscribe（listener回調方法）: 用來監聽Store中狀态值的改變，狀态值改變後會執行相關回調方法。
    • dispatch (action) : 該方法用來修改Store中存儲的狀态值，而Action就是一個普通的對象，其中可以攜帶一些修改特定狀态時的一些資訊。
  • Action： 上面也說了，而Action就是一個普通的對象，其中可以攜帶一些修改特定狀态時的一些資訊，被用來作為dispatch()方法的參數的。起到了媒介的作用，Action本身會攜帶一些資訊，便于狀态的修改。
  • Reducer: Reducer本質上是一個 方法集合的稱呼，而這些方法的入參是 目前的State和Action，出參是被修改後的新的State對象，也就是說 dispatch 一個Action會執行一個Reducer。而Reducer對應方法，會根據Action攜帶的資訊來修改State對象，并把修改後的State對象傳回出去。當然傳回這新的State會更新到Store中，進而會觸發一系列的監聽操作。

Redux的工作模式雖然是管理狀态的，但是使用上個人感覺更想通知。與iOS中的Notification工作方式即為相似，下方做了一些簡單的類比。下方簡單的畫了一個類比的圖，可以從下往上看，解釋如下：

  • 通知中心：最下方是通知中心，對應着iOS的 NotificationCenter，主要用來注冊、派發及移除通知的，是以的通知都會經過NotificationCenter的管理。在 Redux中，這個Store就扮演着 這個NotificationCenter的角色，用來管理所有的狀态。不同的時，Store中會存儲各種狀态。
  • 發送通知：如果要修改狀态的值的話，得調用 Store中提供的 dispatch（事件派發） 方法來修改相關的狀态，這個就好像 iOS中發送通知的Post方法。
  • 注冊監聽：而Store中的 subscribe 這個監聽狀态改變的方法，就類似于 Notification 中的 register方法，隻有添加完監聽的相關對象才能收到狀态被修改的通知。
  • 通知對象：Store中的dispatch() 方法的參數 Action，就類似于 Notification 對象，用來攜帶通知或者狀态修改的資訊。
  • 執行方法：而 redux 中的 Reducer 就類似于執行通知的Selector，用來修改狀态的。
ReactNative之Redux詳解

二、通過加減法示例來看Redux的使用方式

下方通過一個簡單的加減法程式來看一下Redux的使用方式。之前在介紹 iOS中的響應式架構 ReactiveCocoa 時寫過類似的Demo，隻不過今天我們用 Redux 來實作一下。

demo比較簡單，就是兩個加減法，輸入的時候自動的修改計算的結果值。下方我們就來簡單的看一下RN中如何使用Redux來實作該功能。

ReactNative之Redux詳解

1、建立Store 　

首先建立Store，redux 專門提供了一個建立store的方法 createStore ，調用 createStore 時，我們需要把修改State的Reducer方法傳進去進行關聯。下方的calculateReducer是自定義的一個修改State的方法，稍後會介紹。下方代碼比較簡單，就是建立了一個Store，并将該對象導了出去。　　

ReactNative之Redux詳解

2、建立Action

建立Store後，接下來我們來建立對應的Action，下方代碼就是對應的action檔案中的内容。首先建立了一個 CountActionType 的對象，功能類似于枚舉，其中 "ADD" 代表加法類型，"DESC" 代表減法類型。因為該示例中是在一個Reducer中處理的兩個Action，是以得用 CountActionType 類型來判斷派發的是哪個Action，然後做對應的操作。

然後建立了一個 addTowNumbers 方法，該方法接收了一個參數，然後傳回一個Action對象，其中Action對象的類型就是 ADD。 而下方的 descTowNumbers 方法傳回的也是一個Action，該Action對應的是減法操作。稍後我們會使用到該Action。

ReactNative之Redux詳解

3、建立Reducer

下方的calculateReducer方法就是我們建立的Reducer, 該方法接收兩個參數，一個是State對象, 一個是Action對象。我們給State對象賦了一個預設值， 這個預設值中有兩個值，一個是表示加法結果的 addResult, 另一個是表示減法結果的 descResult。

Action對象中的payload對象中有兩個值，及firstNumberhe和secondNumber，表示輸入的兩個值。而在Reducer中通過Action的Type字段來判斷是做加法操作還是減法操作。如果是Add則是加法操作，将payload中的兩個值相加，然後将結果指派給 state 中的addResult。如果是Desc的話，與Add類似，隻不過做的是減法操作。

在該Reducer方法中，傳回的是一個計算後端新的State。State被修改後，可以通過 Store 中的 subscribe 的方法進行監聽該狀态的改變。

ReactNative之Redux詳解

4、AddTestView的實作

定義好Store、Action、Reducer, 接下來我們就開始定義可操作的視圖了。下方的AddTestView就是上面兩個計算加減法的控件。下方是具體實作的說明：

在AddTestView中的構造方法中，我們調用了 store 對象中的 subscribe 方法，傳入了一個回調方法，來對Store中存儲的狀态進行監聽，然後擷取state中最新的狀态，然後指派給元件對應的State對象。

ReactNative之Redux詳解

第二段核心的代碼則是dispathAction了，在輸入框變化後，會根據是Add還是Desc調用下方的dispatchAction方法。如果是Add, 就會調用addTowNumber方法建立一個 加法動作對應的Action。如果是減法操作的話，則會調用 descTowNumber()方法建立一個減法對應的Action對象。然後把建立好的對象，通過store.dispatch(action) 方法派發出去。

store收到 Action後就會執行對應的 Reducer方法，然後去跟進Action提供的資訊修改 Store中存儲的State值。當State值被修改後，就會執行 subscriber 對應的回調方法擷取最新的結果值，并指派給元件内部的State對象進行展示。

ReactNative之Redux詳解

下方AddTestView的全部代碼。

ReactNative之Redux詳解
ReactNative之Redux詳解
// 僅僅使用redux
import React, { Component } from 'react';
import { Action } from 'redux';
import {Text, TouchableOpacity, View, StyleSheet, TextInput} from 'react-native';
import { store } from './store';
import {addTowNumbers, descTowNumbers, CountActionType} from './action';
const {
    DESC,
    ADD
} = CountActionType;

type State = {
    addResult: number,
    descResult: number
};

const styles = StyleSheet.create({
    textInput: {
        width: 60,
        borderRadius: 4,
        borderWidth: 0.5,
        borderColor: 'gray'
    },
    tipText: {
    }
});

export default class AddTestView extends Component<null, State> {
    addFirstNumber: string = '0';
    addSecondNumber: string = '0';
    descFirstNumber: string = '0';
    descSecondNumber: string = '0';

    constructor (props: any) {
        super(props);
        this.state = {
            addResult: 0,
            descResult: 0
        };
        store.subscribe(() => {
            const {
                addResult,
                descResult
            } = store.getState();
            this.setState({ addResult, descResult });
        });
    }

    firstTextChange = (type) => (text) => {
        if (type === CountActionType.ADD) {
            this.addFirstNumber = text;
            this.dispathAddAction();
        } else {
            this.descFirstNumber = text;
            this.dispathDescAction();
        }
    }

    secondTextChange = (type) => (text) => {
        if (type === CountActionType.ADD) {
            this.addSecondNumber = text;
            this.dispathAddAction();
        } else {
            this.descSecondNumber = text;
            this.dispathDescAction();
        }
    }

    dispathAddAction = () => {
        const action = addTowNumbers({firstNumber: this.addFirstNumber, secondNumber: this.addSecondNumber});
        store.dispatch(action);
    }

    dispathDescAction = () => {
        const action = descTowNumbers({firstNumber: this.descFirstNumber, secondNumber: this.descSecondNumber});
        store.dispatch(action);
    }

    calculate = (type) => {
        const calculateText = type === CountActionType.ADD ? '+' : '-';
        const result = type === CountActionType.ADD ? this.state.addResult : this.state.descResult;
        return (
            <View style={{flexDirection: 'row'}}>
                <TextInput style={styles.textInput} defaultValue={'0'} onChangeText = {this.firstTextChange(type)}/>
                <Text> {calculateText} </Text>
                <TextInput style={styles.textInput} defaultValue={'0'} onChangeText = {this.secondTextChange(type)}/>
                <Text> = </Text>
                <Text>{result}</Text>
            </View>
        );
    }

    render () {
        return (
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                {this.calculate(CountActionType.ADD)}
                {this.calculate(CountActionType.DESC)}
            </View>
        );
    }
}

View Code

5、總結

介紹完相關的Demo，我們可以總結一些具體的實作流程。上述各個部分的執行過程是比較簡單的，下方是具體的總結：

  • Component 也就是下邊的AddTestView 是不會直接調用 Reducer 方法來修改狀态的，而是像 Store 通過Dispatch來派發Action的方式向Store下發修改State的指令。
  • Store在收到 Component 派發的 Action 後會調用對應的 Reducer。
  • Reducer則根據提供的Action資訊來修改對應的State的值，并傳回給Store，更新。
  • Component最終通過Subscribe的方式接收到更新後的State，當然派發 Action 的Component 與 Subscriber 對應狀态的 Component 大部分情況下不是一個。
ReactNative之Redux詳解

上面是根據上述示例來畫的簡圖，下方我們可以脫離上述demo, 整理了一個圖。從下圖中不難看出，平時在開發時，Component一般是有多個的，而Store隻有一個，這些Component都像Store派發Action修改對應的狀态，并且可以通過Subscriber來監聽對應狀态值的改變。

而Reducer也可以是多個，建議将Reducer按照修改狀态的類型或者相關的業務邏輯進行拆分，拆分成多個業務子產品。修改不同的狀态時，會調用不同的Reducer。

ReactNative之Redux詳解

上述我們是聲明定義了一個Reducer ，如果修改State的東西都寫在一個方法裡，難免會有些難于維護。是以一般會對Reducer進行拆分，下方是對上述Reducer拆分後的代碼。當然運作效果與之前的是一樣的，下方也是推薦用法。

ReactNative之Redux詳解

雖然該Demo, 使用Redux實作會比較麻煩，使用元件内部的State完全可以實作，因為是為了窺探Redux的使用方式，是以我們就用Redux實作了該demo。但是如果是跨元件的資料交流，該方式就比較合适了。

本篇部落格就先到這兒吧，雖然本篇部落格介紹了Redux, 但是在開發中很少直接使用，一般會結合着其他架構及中間件使用。之前還積累了一些 react-redux, 以及redux-thunk、redux-saga 的東西，下篇部落格把react-redux相關的東西在總結一下，做個記錄也便于自己後期翻閱。最後附上redux的文檔連結，有啥問題可翻閱https://www.redux.org.cn/。

作者：青玉伏案

出處：http://www.cnblogs.com/ludashi/

本文版權歸作者和共部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。

收履歷：某網際網路公司，招聘iOS/Android靠譜工程師，入職後，可内部聯系樓主，有小禮品贈送，有意者可郵箱投遞履歷：[email protected]

reactnative redux 動态化
上一篇: 通過Spring Data Neo4J操作您的圖形資料庫
下一篇: iOS逆向工程之Theos

繼續閱讀