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，用來修改狀態的。

 

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

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

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

 

1、創建Store 　

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

 

 

 

 

2、創建Action

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

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

 

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 的方法進行監聽該狀態的改變。

 

 

4、AddTestView的實現

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

在AddTestView中的構造方法中，我們調用了 store 對象中的 subscribe 方法，傳入了一個回調方法，來對Store中存儲的狀態進行監聽，然后獲取state中最新的狀態，然后賦值給組件對應的State對象。

 

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

store收到 Action后就會執行對應的 Reducer方法，然后去跟進Action提供的信息修改 Store中存儲的State值。當State值被修改后，就會執行 subscriber 對應的回調方法獲取最新的結果值，並賦值給組件內部的State對象進行展示。

 

 

下方AddTestView的全部代碼。

// 僅僅使用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>
        );
    }
}

 

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 大部分情況下不是一個。

 

 

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

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

 

 

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

 

雖然該Demo, 使用Redux實現會比較麻煩，使用組件內部的State完全可以實現，因為是為了窺探Redux的使用方式，所以我們就用Redux實現了該demo。但是如果是跨組件的數據交流，該方式就比較合適了。

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