摘要：

最近，公司準備使用React Native開發(fā)一個檔案APP，我在學(xué)習了一段時間之后，結(jié)合網(wǎng)上前輩們的資料，最終整理了一份基于React Native、Redux的demo。下面進入正題

安裝模塊

npm install --save-dev redux
npm install --save-dev react-redux
npm install --save-dev redux-logger
npm install --save-dev redux-devtools
npm install --save-dev redux-thunk

屏幕快照 2018-11-23 13.59.14.png

具體版本號如上圖所示，另，React Native項目的版本號是0.57

新建ActionTypes.js文件

// 在使用redux過程中，需要給每個動作添加一個actionTypes類型
export const GET_CLASSIFIES = 'GET_CLASSIFIES';

新建CountAction.js文件，網(wǎng)絡(luò)請求一般都是放在action文件中

import {
    GET_CLASSIFIES
} from './actiontypes/ActionTypes';
import {
    QUERY_CLASSIFY
} from '../api/';

// 每個頁面是可以有多個action的，只需要在頁面中引入就好
const getClassifies = () => {
    return async (dispatch) => {
        let msg = await fetch(QUERY_CLASSIFY, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => response.json());

        dispatch({
            type: GET_CLASSIFIES,
            data: msg
        })
    }
};

export {
    getClassifies
}

/**
 * react-redux的執(zhí)行流程：
 * component -> actionCreator(data) -> reducer -> component
 */

新建RootReducer.js文件

// RootReducer中存放的是各個頁面的Reducer，推薦的做法是
// 一個頁面公用一個Reducer，便于之后的管理
// Reducer是純函數(shù)，里面不應(yīng)該有過多的邏輯
import {combineReducers} from 'redux';
import CountReducer from './CountReducer';

// 取決于這里加入了多少 reducer
const RootReducer = combineReducers({
    countReducer: CountReducer
});

export default RootReducer;

新建CountReducer.js文件

import {
    GET_CLASSIFIES
} from '../actions/actiontypes/ActionTypes';

// 原始默認state
const defaultState = {
    count: 5,
    factor: 1,
    data: ''
};

export default function counter(state=defaultState, action) {
    switch(action.type) {
        case GET_CLASSIFIES:
            return {...state, count: state.count + state.factor, data: action.data};

        default:
            return state;
    }
}

新建ConfigureStore.js文件

import {
    createStore,
    applyMiddleware,
    compose
} from 'redux';
// redux-thunk是用來發(fā)送異步請求的中間件，用了thunk之后，
// 一般的操作是將網(wǎng)絡(luò)請求的方法放在action中
import thunk from 'redux-thunk';
// redux-logger是打印logger的中間件
import createLogger from 'redux-logger';
import RootReducer from '../reducers/RootReducer';

const configureStore = preloadState => {
    // createStore(reducer, [initState, enhancer]):創(chuàng)建一個Redux Store來存放所有的
    // state，一個應(yīng)用只能有一個store。函數(shù)返回store對象.enhancer：一個中間件
    return createStore(
        RootReducer,
        preloadState,
        compose(
            applyMiddleware(createLogger, thunk)
        )
    );
};

const store = configureStore();
export default store;

新建CountButton.js頁面

import React, {Component} from 'react';
import {
    View,
    Text,
    Button,
    FlatList,
    StyleSheet
} from 'react-native';
import {connect} from 'react-redux';
import {
    getClassifies
} from '../../redux/actions/CountAction';

class CountButton extends Component {

    constructor(props) {
        super(props);
    }

    _onPressDec() {
        this.props.dispatch(getClassifies());
    }

    render() {
        const {msg, data} = this.props.countReducer.data;

        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Button
                        title='decrement'
                        onPress={() => this._onPressDec()}/>
                </View>
                <Text>{msg}</Text>
                <FlatList
                    data={data}
                    renderItem={({item}) => <Text style={styles.item}>{item.id} {item.phone}</Text>}
                    keyExtractor={(item) => item.id.toString()}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 10
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
});

const mapStateToProps = state => {
    const {countReducer} = state;
    return {
        countReducer
    };
};

// 連接React組件與Redux store
export default connect(mapStateToProps)(CountButton);

總結(jié)，我這面主要是提供一份完整的demo，至于redux中的action，reducer之間的管理，以及redux的實現(xiàn)原理，網(wǎng)上資料超級多，請自行查找，此處不在贅述。
項目地址：https://github.com/SUNOW2/RnDemo