React-Native爬坑中(Redux)

介紹一下我在之前項目中是如何使用redux的惦银。

redux學(xué)習(xí):http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
阮一峰老師已經(jīng)在這幾篇文章里講解的很清楚了,我就不班門弄斧了,這里只是說明一下在項目中的使用跪帝。

首先粱哼,安裝

redux:Redux
react-redux:Redux的作者封裝的React專用庫
redux-logger:日志中間件,用于調(diào)試
redux-persist:緩存
redux-thunk:支持異步dispatch

安裝方法谷徙,在package.json文件中的dependencies中添加以下各項
"react-redux": "^5.0.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-persist": "^4.0.1",
"redux-thunk": "^2.1.0"
然后拒啰,執(zhí)行npm install即可

也可以分開安裝,例如完慧,安裝redux
npm install --save redux (--save代表修改package.json中的dependencies谋旦,關(guān)于npm的使用可以自行百度,給一個菜鳥教程的鏈接:http://www.runoob.com/nodejs/nodejs-npm.html

準(zhǔn)備工作完畢后,首先從store開始册着,新建一個文件拴孤,添加以下代碼:

import {applyMiddleware, createStore} from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import {persistStore, autoRehydrate} from 'redux-persist';
import {AsyncStorage} from 'react-native';
import reducers from '../reducers/index'; //后面解釋這個

const logger = createLogger();

let middlewares = [
    thunk,
    logger
];
//解釋一下這個寫法的意思,可以查看源碼甲捏,看到applyMiddleware函數(shù)演熟,可以傳遞參數(shù)‘{...Function} middlewares The middleware chain to be applied’,然后返回一個以createStore函數(shù)為參數(shù)的函數(shù)司顿,最后會返回一個和createStore函數(shù)參數(shù)相同的函數(shù)芒粹,即createAppStore實際是一個function (reducer, preloadedState, enhancer),且這個函數(shù)中持有傳入的createStore函數(shù)大溜,說了一堆函數(shù)可能有點亂化漆,其實就是幾個閉包
let createAppStore = applyMiddleware(...middlewares)(createStore);

export default function configureStore(onComplete: ()=>void){
//同樣的查看autoRehydrate,會看到這個函數(shù)結(jié)構(gòu)基本和applyMiddleware一樣钦奋,所以生成store的過程有很多種寫法获三,其實最后得到的結(jié)果是一樣
    const store = autoRehydrate()(createAppStore)(reducers);
    let opt = {
        storage: AsyncStorage,
        transform: [],
        whitelist: [],
        blacklist: []
    };
    persistStore(store, opt, onComplete);
    return store;
}

下面實現(xiàn)創(chuàng)建store時用到的reducers,隨著項目的增大锨苏,reducer會有很多疙教,所以可以將其進(jìn)行劃分,最后合并到一起伞租。例如這里新建一個price.js的reducer文件贞谓,在文件中如此實現(xiàn):

//數(shù)據(jù)結(jié)構(gòu)因業(yè)務(wù)所定
const initialState = {
    datas: null,
    status: null,
    netMsg: null,
    price: null
};

import {Net, Process, Response} from '../net/net';
import Type from '../actions/type';
export default function priceReducer(state=initialState, action){
    switch(action.type){
        case Type.GETPRICEBASEDATA:
        {
            switch (action.name) {
                case Process.FETCH_BEGIN:
                    return {
                        ...state,
                        status: Process.FETCH_BEGIN,
                        price: null
                    };

                case Process.FETCH_SUCCESS:
                    return {
                        ...state,
                        datas: action.payload,
                        status: Process.FETCH_SUCCESS,
                        netMsg: action.msg
                    };

                case Process.FETCH_FAIL:
                    return {
                        ...state,
                        status: Process.FETCH_FAIL,
                        netMsg: action.msg
                    };

                default:
                    return state;
            }
        }
        case Type.CALCULATEPRICE:
        {
            switch (action.name) {
                case Process.FETCH_BEGIN:
                    return {
                        ...state,
                        status: Process.FETCH_BEGIN
                    };

                case Process.FETCH_SUCCESS:
                    return {
                        ...state,
                        price: action.payload,
                        status: Process.FETCH_SUCCESS,
                        netMsg: action.msg
                    };

                case Process.FETCH_FAIL:
                    return {
                        ...state,
                        status: Process.FETCH_FAIL,
                        netMsg: action.msg
                    };

                default:
                    return state;
            }
        }
        default:
            return state;
    }

}

同理新建其它reducer,然后在reducers.js文件中合并

import { combineReducers } from 'redux';
import serviceReducer from './service';
import priceReducer from './price';
import answersReducer from './answers';

export default combineReducers({
    serviceStore: serviceReducer,
    priceStore: priceReducer,
    answersStore: answersReducer
});

然后實現(xiàn)action葵诈,同樣action也應(yīng)該劃分實現(xiàn)裸弦,例如price.js的action如下:

import {Net, Process, Api, Response} from '../net/net';
import Type from './type';

const changePriceParams = (name, params) => (dispatch, getState) => {
    return dispatch({type: Type.CHANGEPRICEPARAMS, name, params});
};

const calculatePrice = (params) => (dispatch, getState) => {
    dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_BEGIN});
    return Net.commonPostModel(Api.CALCULATEPRICEAPI, params, (res)=>{
        if (res.code == 0 || res.code == 999) {
            dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_SUCCESS, payload: res.data, msg: res.msg})//res.data
        } else {
            dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_FAIL, payload: null, msg: res.msg})
        }
    })
};

const getPriceBaseData = () => (dispatch, getState) => {
    dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_BEGIN});
    return Net.commonGetModel(Api.GETPRICEBASEDATAAPI, null, (res)=>{
        if (res.code == 0 || res.code == 999) {
            dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_SUCCESS, payload: res.data, msg: res.msg})//res.data
        } else {
            dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_FAIL, payload: null, msg: res.msg})
        }
    })
};

export {changePriceParams, calculatePrice, getPriceBaseData};

type.js表示action的標(biāo)示

const Type = {
    get GETSERVICEMAIN() {return 'GETSERVICEMAIN'},
    get CHANGEPRICEPARAMS() {return 'CHANGEPRICEPARAMS'},
    get GETPRICERULE() {return 'GETPRICERULE'},
    get SWITCHSECTION() {return 'SWITCHSECTION'},
    get GETPRICEBASEDATA() {return 'GETPRICEBASEDATA'},
    get CALCULATEPRICE() {return 'CALCULATEPRICE'}
};
export default Type;

各部分定義完畢后,在根文件如下實現(xiàn):

import React, { Component } from 'react';
import { Provider } from 'react-redux'; //Provider利用了context機(jī)制將store對象傳遞到各個子控件

import configureStore from './store/index';
let store = configureStore();

import Root from './root';

export default class App extends Component{
    render(){
        return (
            <Provider store={store}>
                <Root />
            </Provider>
        )
    }
}

在每個子控件中export時作喘,如下寫:

import { connect } from 'react-redux';
export default connect()(Root);

另外兩個參數(shù)可選實現(xiàn)

import {changePriceParams, calculatePrice, getPriceBaseData} from '../actions/price';

//映射state到props理疙,即獲取時直接寫this.props.price即可,不再使用this.state(不是不能用this.state泞坦,只是和react-redux的設(shè)計有悖)
const mapStateToProps = (state) => {
    return {
        params: state.priceStore.params,
        datas: state.priceStore.datas,
        status: state.priceStore.status,
        netMsg: state.priceStore.netMsg,
        price: state.priceStore.price
    }
};
//映射dispatch到props窖贤,即使用時this.props.calculatePrice(...)即可
const mapDispatchToProps = (dispatch) => {
    return {
        changePriceParams: (name, text)=> {
            dispatch(changePriceParams(name, text))
        },
        getPriceBaseData: ()=> {
            dispatch(getPriceBaseData())
        },
        calculatePrice: (params)=> {
            dispatch(calculatePrice(params))
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Price);

最后,在控件中即可如下使用:

render() {
        if (this.props.status === Process.FETCH_BEGIN) {
            showLoading(null);
            this.loading = true;
        } else if (this.props.status === Process.FETCH_FAIL && this.loading) {
            showError(this.props.netMsg);
            this.loading = false;
        } else {
            hideHUD();
        }
        return this._mainView();
    }

在需要計算價格的地方贰锁,執(zhí)行this.props.calculatePrice(params);即可赃梧。
調(diào)用相應(yīng)action,然后傳遞至reducer修改store豌熄,然后更新界面授嘀,這些都會自動執(zhí)行
這樣UI可以專心UI,業(yè)務(wù)可以專心業(yè)務(wù)锣险,數(shù)據(jù)存儲專心存儲蹄皱,網(wǎng)絡(luò)請求專心網(wǎng)絡(luò)览闰,完美分割。

然后巷折,針對視圖還可以做很多事情焕济,例如如何分離控件與布局,如何自定義navigator盔几,自定義控件晴弃,控件間傳值等等,RN要學(xué)的東西真心不少逊拍,這些還只是皮毛上鞠,未究其里!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末芯丧,一起剝皮案震驚了整個濱河市芍阎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缨恒,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骗露,死亡現(xiàn)場離奇詭異,居然都是意外死亡珊随,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門柿隙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叶洞,“玉大人禀崖,你說我怎么就攤上這事衩辟〔ǜ剑” “怎么了艺晴?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長叶雹。 經(jīng)常有香客問我财饥,道長折晦,這世上最難降的妖魔是什么沾瓦? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任谦炒,我火速辦了婚禮风喇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘魂莫。我一直安慰自己,他們只是感情好耙考,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著斗遏,像睡著了一般鞋邑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枚碗,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音嬉荆,去河邊找鬼酷含。 笑死鄙早,一個胖子當(dāng)著我的面吹牛椅亚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播弥虐,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼媚赖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了惧磺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤缤底,失蹤者是張志新(化名)和其女友劉穎顾患,沒想到半個月后个唧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體江解,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡犁河,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年魄梯,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片画恰。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡允扇,死狀恐怖缠局,靈堂內(nèi)的尸體忽然破棺而出考润,到底是詐尸還是另有隱情,我是刑警寧澤糊治,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布井辜,位于F島的核電站,受9級特大地震影響粥脚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜刷允,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一树灶、第九天 我趴在偏房一處隱蔽的房頂上張望纤怒。 院中可真熱鬧天通,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽序臂。三九已至,卻和暖如春奥秆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背构订。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工悼瘾, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留囊榜,地道東北人亥宿。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像曙求,于是被迫代替她去往敵國和親映企。 傳聞我的和親對象是個殘疾皇子悟狱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容