react-native redux 操作

1.项目目录

2.redux

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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/**  * 步骤一  * 行为 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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

/**  * 步骤二  * 操作  * 通过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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/**  * 步骤三  * 初始化 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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/**  * 容器组件  * 入口文件  */ 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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

/*主页面*/ 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

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/*测试组件*/ 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>     );   } }

.