注意：未經允許不可私自轉載，違者必究

React Native官方文件：https://reactnative.cn/docs/getting-started/

redux官方文件：https://www.redux.org.cn/

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

安裝redux react-redux  react-navigation-redux-helpers

在專案目錄下cmd裡面執行以下命令：

yarn add redux

yarn add react-redux

yarn add react-navigation-redux-helpers
 

沒有安裝yarn映象的請看教程：https://blog.csdn.net/weixin_40614372/article/details/86154119

redux react-redux  react-navigation-redux-helpers在React Native裡面的配置

檢視專案目錄：https://github.com/zhouwei1994/nativeCase/blob/master/README.md

本專案是用react-navigation來做路由，路由長度需要由redux來託管，所以下面程式碼會和react-navigation關聯，沒有配置react-navigation請參考這篇文字

：https://blog.csdn.net/weixin_40614372/article/details/86237863

在src/store檔案下建立：

1. index.js    redux配置
2. stores.js   redux資料中心

index.js檔案如下：

import AppNavigator from './../router/index';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { AsyncStorage } from 'react-native';
import { reduxifyNavigator, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';
import { connect } from 'react-redux';
import { stores,cacheNameList } from './stores';
//建立導航狀態資料商店redux
const navReducer = createNavigationReducer(AppNavigator);
//結合redux
const appReducer = combineReducers({
    ...stores,
    nav: navReducer
});
// 建立React Navigation Redux中介軟體
const middleware = createReactNavigationReduxMiddleware(
    "Root",
    state => state.nav,
);
// 生成reduxify導航元件
const App = reduxifyNavigator(AppNavigator, "Root");
const mapStateToProps = (state) => ({
    state: state.nav,
});
//建立資料商店
export const store = createStore(
    appReducer,
    applyMiddleware(middleware),
);
export const AppWithNavigationState = connect(mapStateToProps)(App);
//每次啟動專案的時候自動把 cacheNameList 裡面提供名稱的資料填充到redux資料中心
async function setCacheData() {
    for (var item of cacheNameList) {
        let getData = await AsyncStorage.getItem(item);
        if (getData) {
            store.dispatch({
                type: item,
                data: JSON.parse(getData)
            });
        }
    }
};
setCacheData();
 

stores.js檔案如下：

import { modifyJson } from "./../config/utils";
import { AsyncStorage } from 'react-native';
//快取瀏覽器的資料名稱
export const cacheNameList = ["USER_INFO_TODO", "OTHER_TODO"];
function storeStorage(key,text) {
    AsyncStorage.setItem(key, text);
}
//使用者資料
function userInfo(
    state = {
        token: "fsfsfsdfsd"
    }, action) {
    switch (action.type) {
        case 'USER_INFO_TODO':
            if (action.data) {
                var userText = modifyJson(action.data,state)
                storeStorage('USER_INFO_TODO', JSON.stringify(userText));
                return userText;
            } else {
                return state;
            }
        default:
            return state
    }
};

function other(state = "123456789", action) {
    switch (action.type) {
        case "OTHER_TODO":
            if (action.data) {
                // storage.setItem('OTHER_TODO', JSON.stringify(action.data));
                return action.data;
            } else {
                return state;
            }
        default:
            return state
    }
}
export const stores = {
    userInfo,
    other,
};

在主入口檔案App.js裡面如下配置：

import React, { Component } from 'react';
import { ToastAndroid, BackHandler, StatusBar } from 'react-native';
import { NavigationActions } from "react-navigation";
import { Provider } from 'react-redux';
import { store, AppWithNavigationState } from './store/index';

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

redux 的使用

如下程式碼：

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import { connect } from 'react-redux';
class My extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        console.log(this.props);
    }
    render() {
        return (
            <ScrollView style={styles.myPage}>
                <Text style={{fontSize:40}}>全域性狀態管理方法</Text>
                <Text>token:{this.props.userInfo.token}</Text>
                <Button title="修改token" onPress={this.props.setUserInfo}></Button>
                <Text>更多資料:{this.props.other}</Text>
                <Button title="修改更多" onPress={this.props.setOther}></Button>
            </ScrollView>
        );
    }
}
let USER_INFO_TODO = {
    type: "USER_INFO_TODO",
    data: {
        token: ""
    }
};
let OTHER_TODO = {
    type: "OTHER_TODO",
    data: ""
};
//獲取redux裡面的資料
let mapStateToProps = function (state) {
    return {
        userInfo: state.userInfo,
        other: state.other,
    }
}
//給對應的資料賦值
let mapDispatchToProps = function (dispatch) {
    return {
        setUserInfo: () => {
            USER_INFO_TODO.data.token = "123";
            return dispatch(USER_INFO_TODO)
        },
        setOther: () => {
            OTHER_TODO.data = "456";
            return dispatch(OTHER_TODO)
        }
    }
}
//redux和頁面關聯
export default connect(mapStateToProps, mapDispatchToProps)(My);
const styles = StyleSheet.create({
    myPage: {
        backgroundColor: '#f5f5f5',
    },
});

這裡是redux的全部例項，不知道各位小夥伴能不能看懂

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

注意：未經允許不可私自轉載，違者必究