【React-native】Redux 简洁教程

项目复杂度虽然不足以用到 Redux，但是个人很感兴趣，故来试试 Redux。

可以用于项目的状态管理（子页面改变父页面 state 值，兄弟组件之间共享状态）

如下效果（尴尬，录屏软件不能用了）：

主页中存储 redux 中的值，value 为 redux，红字部分

 在子页面中，更改值，如下图，更改为 haha，下图中的加减数值亦是 redux 管理。

 父页面一并更改

 

---

redux 图解（源于网络，侵删）：

---

 

步骤解析：

一，引入依赖。

二，入口文件引入 Provider 并包裹 root 组件。

三，创建action，reducer，store。

四，相关页面调用并获取值。

那么，let's do it.

---

一，引入依赖

npm install react-redux

npm install redux

如下图，这是我的版本，各版本可能会有差异，建议在相同版本下进行练习：

---

 二，入口文件引入 Provider 并包裹 root 组件

import {Provider} from 'react-redux';
import configureStore from './commonPage/Components/Redux/store/store'

const store = configureStore();

export default class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <RootStack/>
            </Provider>
        )
    }
}

 

PS：这里的 configureStore 会在后面配置，别着急。 

找到项目下的 App.js，然后如下图

 

---

三，创建action，reducer，store

如下是我的目录结构：

action.js: 

/**
 * Created by supervons on 2019/3/3.
 * Redux action 设置
 */
export const ADD_TEXT = 'ADD_TEXT';
export const SUBTRACT_TEXT = 'SUBTRACT_TEXT';
export const RESET_TEXT = 'RESET_TEXT';

// 初始化 ADD_TEXT 对象
export const addText = (text) => {
    return {
        type: ADD_TEXT,
        text
    }
};

// 初始化 SUBTRACT_TEXT 对象
export const subtractText = (text) => {
    return {
        type: SUBTRACT_TEXT,
        text,
    }
};

// 初始化 Reset_TEXT 对象
export const resetText = (text) => {
    return {
        type: RESET_TEXT,
        text,
    }
};

mainReducer.js:

/**
 * Created by supervons on 2019/3/3.
 * Redux Reducer设置
 */
import { ADD_TEXT, subtractText, SUBTRACT_TEXT, RESET_TEXT  } from '../action/action';

const mainReducer = (state = subtractText(0), action) => {

    const newState = state;
    const text = action.text;
    console.log('newState' + JSON.stringify(newState) + ' -- ' + text);
    // 判断 action 类型
    switch (action.type) {

        case ADD_TEXT:
            return {
                ...newState,
                text: state.text + text
            };

        case SUBTRACT_TEXT:
            return {
                ...newState,
                text: state.text - text
            };

        case RESET_TEXT:
            return {
                ...newState,
                text: text
            };

        default:
            return {
                ...newState,
                text:state.text
            }
    }
};
export default mainReducer;

store.js:

/**
 * Created by edz on 2019/3/3.
 * store，初始化reducer
 */
import Reducer from '../reducer/mainReducer';
import { createStore } from 'redux';

export default () => {

    // 根据 reducer 初始化 store
    const store = createStore(Reducer);

    return store;
}

以上代码就完成了，接下来是测试页面：

ReduxTest:

/**
 * Created by supervons on 2019/3/3.
 * Redux组件，外层组件需使用 <Provider store={store}> 嵌套
 */
import {View} from 'react-native';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {addText, subtractText, resetText} from '../Redux/action/action';
import {setTestText} from '../Redux/action/testTextAction';
import {
    Input,
    Text,
    Button,
    Item,
    Label,
} from 'native-base';
let texta = 'ops';
class ReduxTest extends Component {
    constructor(props) {
        super(props);
        this.state={
            text:'',
        }
    }

    static navigationOptions = {
        title: 'Redux测试界面',
        gesturesEnabled: true,
        headerStyle: {                                 //导航栏样式设置
            backgroundColor: '#8bc9ff',
        },
    }

    render() {
        const {onAddText, onSubtractText, onResetText, SetTestText } = this.props;
        return (
            <View
                style={{flex: 1,}}>
                <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}>
                    <View>
                        <Button transparent onPress={onAddText}>
                            <Text style={{fontSize: 40}}>+</Text>
                        </Button>
                    </View>
                    <Text style={{fontSize: 50}}>{this.props.value}</Text>
                    <View>
                        <Button transparent onPress={onSubtractText}>
                            <Text style={{fontSize: 40}}>-</Text>
                        </Button>
                    </View>
                </View>
                <View style={{flex: 1,flexDirection: 'row', justifyContent: 'center',}}>
                    <Button info onPress={onResetText}>
                        <Text style={{fontSize: 40}}>重置</Text>
                    </Button>
                </View>

                <Item floatingLabel>
                    <Label>赋予 Redux 中 text 新值（可在主页中查看更新）</Label>
                    <Input onChangeText={(text) => {this.setState({text: text});texta=text}}
                           autoCorrect={false}
                           autoCapitalize="none"
                           value={this.state.text}/>
                </Item>
                <View style={{flex: 1,flexDirection: 'row', justifyContent: 'center',}}>
                    <Text style={{fontSize: 50}}>{this.props.text}</Text>
                    <Button info onPress={SetTestText}>
                        <Text style={{fontSize: 40}}>改变字体</Text>
                    </Button>
                </View>
            </View>
        );
    }
}

// 获取 state 变化
const mapStateToProps = (state) => {
    return {
        // 获取 state 变化
        value: state.mainReducer.text,
        text: state.testReducer.text,
    }
};

// 发送行为
const mapDispatchToProps = (dispatch) => {
    return {
        // 发送行为
        onAddText: () => dispatch(addText(1)),
        onSubtractText: () => dispatch(subtractText(1)),
        onResetText: () => dispatch(resetText(0)),
        SetTestText: () => dispatch(setTestText(texta)),
    }
};

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

这里我们可以知道，想要调用 action 改变 store 值的话，就需要 在 export deault 中使用 connect（）（XX组件名），这样的方式来进行使用。

 项目地址：https://github.com/supervons/commonProject/tree/master/commonPage/Components/Redux