ReactNative之Redux詳解

用redux有一段時間了，感受仍是有必要把其相關的知識點系統的總結一下的，畢竟好記性不如爛筆頭。上篇博客更新了關於《ES6中的迭代器、Generator函數以及Generator函數的異步操做》的內容，該內容時saga的基礎，稍後會總結saga相關知識點。按部就班，本篇博客主要總結的是Redux相關的內容，而後下篇博客打算總結一下react-redux, 以及redux-thunk、redux-saga中間件。

 

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

 

2、經過加減法示例來看Redux的使用方式

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

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

 

一、建立Store 　

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

 

 

 

 

二、建立Action

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

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

 

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

 

 

四、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>
        );
    }
}

View Code

 

五、總結

介紹完相關的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/。