React Native入门篇—redux react-redux react-navigation-redux-helpers的安装和配置

注意：未经允许不可私自转载，违者必究

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

注意：未经允许不可私自转载，违者必究