react-native redux 操作

1.项目目录

2.redux

（1）app/redux/action/action.js

/**
 * 步骤一
 * 行为 action
 */

// 定义行为名称
export const CHANGE_TEXT = 'CHANGE_TEXT';

// 初始化 CHANGE_TEXT 对象
export const changeText = (text) => { // 接收test参数
  return {
    type: CHANGE_TEXT, // 名称
    text // 参数 默认值
  }
};

（2）app/redux/reducer/reducer.js

/**
 * 步骤二
 * 操作
 * 通过reducer操作action(根据action行为创建reducer文件)
 */

/**
 * 引入 action
 * CHANGE_TEXT 类型(行为名称)
 * changeText 值
 */
import { CHANGE_TEXT, changeText } from '../action/action';

/**
 * 创建 reducer
 * 根据名称判断是哪一个行为
 * state = changeText('welcome to React Native') 初始化state
 */
const mainReducer = (state = changeText('welcome to React Native'), action) => {
  /**
   * state 不能直接改变
   * 定义newState 接收state的值
   */
  const newState = state;
  const text = action.text;

  // 判断 action 类型
  switch (action.type) {
    case CHANGE_TEXT:
      return {
        // 返回所有的newState
        ...newState,
        text: '改变了' + text
      };

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

// 输出口
export default mainReducer;

（3）app/redux/store/store.js

/**
 * 步骤三
 * 初始化 store
 */
// 引入 reducer(操作)
import Reducer from '../reducer/reducer';
// 获取redux中的初始化方法 createStore
import { createStore } from 'redux';

// 输出
export default () => {

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

  return store;
}

3.页面引用

（1）app/containers/Index.js

/**
 * 容器组件
 * 入口文件
 */
import React, { Component } from 'react';

// 引用外部文件
import { Provider } from 'react-redux';
import Main from './Main';
import configureStore from '../redux/store/store';

// 调用 store 文件中的 mainReducer常量中保存的方法
const store = configureStore();
// 定义根组件
export default class Root extends Component {
  render() {
    return(
      // 第一层包装,为了让 main 能够拿到 store
      <Provider store={store}>
        <Main />
      </Provider>
    )
  }
}

（2）app/containers/Main.js

/*主页面*/
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

// 引入 测试组件
import TestText from '../components/TestText'
/**
 * 获取 react-redux的 connect() 方法
 * 注：使组件层级中的 connect() 方法能够得到 redux store
 */
import { connect } from 'react-redux';
// 获取 action行为的值
// import { CHANGE_TEXT } from '../redux/action/action';
import { changeText } from '../redux/action/action';

class Main extends Component {
  render() {
    // 通过 props 拿到保存的 onChangeText
    const { onChangeText } = this.props;

    return (
      <View style={styles.container}>
        {/* 需要改变的组件 */}
        {/* 将父组件(Main)的props,传递给子组件(TestText)*/}
        <TestText {...this.props} />

        {/* 按钮 */}
        <TouchableOpacity
          // 设置按钮点击事件
          onPress={onChangeText}
        >
          <Text>改变文字按钮</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

// 发送行为
const mapDispatchToProps = (dispatch) => {
  return {
    // 发送行为
    // onChangeText: () => dispatch({type: CHANGE_TEXT}),
    onChangeText: () => dispatch(changeText('外部传值')),
  }
};

/**
 * 通过 connect() 方法 对Main组件进行第二层包装
 * 进行第二层包装,生成的新组件拥有 接收和发送 数据的能力
 * mapStateToProps 获取状态的函数
 * mapDispatchToProps 发送行为的函数
 */
export default connect(mapStateToProps, mapDispatchToProps)(Main);

（3）app/components/TestText.js

/*测试组件*/
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class TestText extends Component {
  render() {
    // 获取 props 中的 value
    const { value } = this.props;

    return (
      // 根据 value 改变内部文字
      <Text>{value}</Text>
    );
  }
}

.