演示效果:

理論知識:

理論知識重複炒冷飯等於製造網路垃圾，所以貼上幾篇我覺得寫得不錯的給大家瞅瞅

核心理念:

Store:應用只有一個單一的 Store,State是這個狀態集合某一時刻的狀態
Action:改變state的載體，也是Store的資料來源
Reducer:更新Store的具體操作者

ok,你現在肯定雲裡霧裡的，我們用程式碼邊寫邊解釋

專案結構:

Action相關

MathType

export const ADD_TYPE = 'ADD_TYPE';
export const MINUS_TYPE = 'MINUS_TYPE'
 
;

這裡是2個常量，”加型別”,”減型別”，我們每種action都有他相對應的型別，可以寫在Action裡也可以寫一個型別對他進行劃分，我習慣是拆的越細越好

MathAction

// action型別
import * as types from '../type/MathType';

// 每一個action方法返回一個新的"state"物件,他就是應用當前的狀態
export function add(intvalue) {
    console.log('---> MainAction add intvalue ' + intvalue);
    return {
        type
 
: types.ADD_TYPE,
        result: intvalue,
    }
};

export function minus(intvalue) {
    console.log('---> MainAction minus intvalue ' + intvalue);
    return {
        type: types.MINUS_TYPE,
        result: intvalue,
    }
};

Reducer相關

MathReducer

import  * as Type from'../type/MathType'
 
;

//初始化
const initState = {
    result: 0
};

export default function mathReducer(state = initState, action = {}) {
    switch (action.type) {
        case Type.ADD_TYPE:
            console.log('---> mathReducer action.type ' + action.type);
            return {
                ...state,
                result: action.result + 10,
            };
            break;
        case Type.MINUS_TYPE:
            console.log('---> mathReducer action.type ' + action.type);
            return {
                ...state,
                result: action.result - 10,
            };
        default:
            return state;
    }
}

肉眼看起來很簡單，這裡接受兩種型別的action一個是➕，一個是➖，每次他都會改變傳入引數的值，而且是一定改變，一定會+10或者-10!
reducer只是一個方法，傳入什麼，返回什麼。結果是個恆定值，只要傳入引數不變，返回引數一定也不變！

reducers

import  Mathreducer from './Mathreducer';

import  {combineReducers} from 'redux';

export default combineReducers({
    mathStore: Mathreducer,
});

這是一個reducer的大容器，你所有reducer丟一個方法裡也不是不能處理，但是效能差加難以維護，所以redux提供combineReducers來幫你整合reducer

Store相關

store是個應用級持有的物件，所以我們把他放到了”根”頁面裡去做初始化,因為我們之後還會用到非同步action,所以還用到redux-thunk的相關內容

import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducers from'./reducer/reducers';
const middlewares = [thunk];
const createSoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
import  React from 'react';
import  Main from'./Main';

export default class App extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            store: createSoreWithMiddleware(reducers)
        }
    }

    //前面一些只是物件，方法相關的操作，肉眼可以識別，Provider是讓我們決定使用redux的一個原因，它可以讓我們操作容器內的元件卻不需要手動傳遞內容
    //想想複雜應用來一個 4層以上的json要你你自己操作的話的工作量吧
    render() {
        return (
            <Provider store={this.state.store}>
                <Main/>
            </Provider>
        )
    }
}

只需要在外面套一層，所有子控制元件的屬性竟在掌握!

頁面程式碼

import React from'react';


import {connect} from 'react-redux';
//加減的兩種action
import {add, minus} from './action/MathAction';

import {
    Text,
    View,
    TouchableHighlight,
} from 'react-native';

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.addPress = this.addPress.bind(this);
        this.minusPress = this.minusPress.bind(this);
        //初始值，也可以是外部傳入
        this.state = {
            intvalue: 100,
        }
    }

    addPress() {
        console.log('---> Main addPress');
        this.props.dispatch(add(this.state.intvalue));
    }

    minusPress() {
        console.log('---> Main minuPress');
        //dispatch(action) 方法更新 state
        this.props.dispatch(minus(this.state.intvalue));
    }

    //狀態變化時會被呼叫
    shouldComponentUpdate(nextProps, nextState) {
        console.log('---> Main shouldComponentUpdate');
        if (nextProps.result !== this.props.result) {
            this.state.intvalue = nextProps.result;
            console.log('---> Main shouldComponentUpdate this.state.intvalue ' + this.state.intvalue);
            return true;
        }
    }

    render() {
        console.log('---> Main render');
        return (
            <View style={{justifyContent: 'center'}}>
                <TouchableHighlight onPress={this.addPress}>
                    <Text style={{fontSize: 15}}>
                        按我會加
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight style={{marginTop: 30}} onPress={this.minusPress}>
                    <Text style={{fontSize: 15}}>
                        按我會減
                    </Text>
                </TouchableHighlight>
                <Text style={{marginTop: 30, color: '#ffaa11'}}>{this.state.intvalue}</Text>
            </View>
        )
    }
}

function select(store) {
    return {
        result: store.mathStore.result,
    }
}
//connect方法建立資料與狀態的關係，達到重新整理ui的效果
export  default  connect(select)(Main);

這樣這個簡單的demo就講完了，什麼？看不懂，我也覺得 這說的是啥啊，過程都沒講清楚，ok 看下console你就明白了！

//首頁被加載出來
05-19 20:52:49.094 5992-24741/? I/ReactNativeJS: ---> Main render

//頁面點選了 “按我會加”
05-19 20:52:57.746 5992-24741/? I/ReactNativeJS: ---> Main addPress

//action得到了響應獲取到了 100(正常的方法呼叫嘛？繼續看！)
05-19 20:52:57.747 5992-24741/? I/ReactNativeJS: ---> MainAction add intvalue 100

//傳遞到了reducer獲取到了觸發的型別
05-19 20:52:57.747 5992-24741/? I/ReactNativeJS: ---> mathReducer action.type ADD_TYPE

//頁面收到了state改變的訊息，回撥被觸發
05-19 20:52:57.759 5992-24741/? I/ReactNativeJS: ---> Main shouldComponentUpdate

//新的值是之前的100+reducer的10=110
05-19 20:52:57.759 5992-24741/? I/ReactNativeJS: ---> Main shouldComponentUpdate this.state.intvalue 110

//重新整理資料
05-19 20:52:57.759 5992-24741/? I/ReactNativeJS: ---> Main render

//第二次操作，不解釋了
05-19 20:53:02.010 5992-24741/? I/ReactNativeJS: ---> Main minuPress
05-19 20:53:02.010 5992-24741/? I/ReactNativeJS: ---> MainAction minus intvalue 110
05-19 20:53:02.010 5992-24741/? I/ReactNativeJS: ---> mathReducer action.type MINUS_TYPE
05-19 20:53:02.015 5992-24741/? I/ReactNativeJS: ---> Main shouldComponentUpdate
05-19 20:53:02.015 5992-24741/? I/ReactNativeJS: ---> Main shouldComponentUpdate this.state.intvalue 100
05-19 20:53:02.015 5992-24741/? I/ReactNativeJS: ---> Main render

action reducer本身看起來平淡無奇，但是在store內輪轉使得我們省去了大量setState的人工操作，避免了各種不可描述的render().

但是 redux處理不好會各種多次render頁面，之後的文章我會講一講非同步的action和react-native優化

我是王亟亟！我們下篇見

有問題可以掃碼加好友詢問噢，非公眾號，閒人勿擾！