[快速上手RN] 4. React native 集成redux

系列教程

[快速上手RN] 0.React Native 快速启动项目
[快速上手RN] 1. React native 项目集成UI Kitten
[快速上手RN] 2. React native 项目色彩主题色编辑及使用
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
[快速上手RN] 4. React native 集成redux

1.目标

redux是一个状态管理工具，我们使用它也是为了方便多页面，多组件通信，以及能保证数据流的干净整洁
接下来我们将实现跨页面的加减法组件，能够在A页面和B页面共同查看和管理一个数据（状态）

2.安装依赖

1. react-redux
2. redux

code

npm install redux react-redux --save

3.目录设计

• store
  • index.js
  • reducers.js
  • counter
    • action.js
    • actionType.js
    • reducers.js

3.文件代码

3.1 store/index.js

import { createStore } from "redux";
import rootReducer from './reducers'
const configureStore = preloadedState => {
    return createStore(rootReducer)
}

const store = configureStore();
export default store;

3.2 store/reducers.js

import { combineReducers } from "redux";
import counter from './counter/reducer' // 后续如果有新的reducer，也同样方式引入
export default combineReducers({
    counter
})

3.3 store/counter/actionTypes.js

我们需要先定义操作的类型
分别为 新增、删除、重置

export const ADD = 'ADD';
export const SUB = 'SUB';
export const RESET = 'RESET';

3.4 store/counter/action.js

在这个文件，我们将export出操作函数
为何弄的相对繁琐而不是写到一个文件，这是为了能够降低耦合度以及清晰数据流，使用时也能统一使用这里export出的操作函数，而不是直接dispatch对应的type

import { ADD, SUB,  RESET } from './actionTypes';

const addCount = () => ({ type: ADD });
const subCount = () => ({ type: SUB });
const resetCount = data => ({ type: RESET, data });

export {
    addCount,
    subCount,
    resetCount
}

3.5 store/counter/reducer.js

我们从./actionTypes.js引用type，用于判断需要做哪布操作
reducer接收2个参数

1. state: 我们需要维护的数据object，写state = defaultState是为了初始化该值为defaultState
2. action: 我们接收到的操作内容，包含2个值
   1. type: 需要执行的操作，比如这次的新增、减少、重置
   2. data: 接收到的数据，比如这次的重置，我们将重置一个指定的值，那么就会用到它

import { ADD, SUB, RESET } from './actionTypes';

const defaultState = {
  count: 0
}

function counter(state = defaultState, action) {
  switch (action.type) {
    case ADD:
      return { ...state, count: state.count + 1 };
    case SUB:
      return { ...state, count: state.count + 1 };
    case RESET:
	  return { ...state, count: action.data };
    default:
      return state;
  }
}

export default counter;

3.6 在App.js中注入

我们需要从react-redux中引入Provider组件，并将我们的业务组件包裹其中,然后传入store参数

Code
--------注意---------
需要将AppNavigator的部分，修改为你的业务组件

import React from "react";
import { Provider } from "react-redux";
import store from "./src/store";
import AppNavigator from "./src/navigator/AppNavigator";

const App = () => { 
  return (
    <Provider store={store}>
        <AppNavigator />
    </Provider>
  );
};
export default App;

至此，我们已经成功将redux集成到我们的react-native项目中了
下一步，我们将使用它们

4.在页面中使用

如果你还没有开发自己的页面组件，那么建议你看下系列文章的上一篇~

打开你的页面组件，并从react-redux引入connect后按照以下代码实现
细节请看注释

import React from "react";
import { connect } from "react-redux";
import { Button, Text, View } from "react-native";
import { addCount, subCount, resetCount } from "../../store/counter/action";
function mapStateToProps(state) {
  return {
    counter: state.counter, // 我们reducers中的counter
  };
}

function mapDispatchToProps(dispatch) {
  // 我们在此拿到之前在action.js定义的操作函数来使用
  return {
    addCount: () => dispatch(addCount()),
    subCount: () => dispatch(subCount()),
    resetCount: (data) => dispatch({ ...resetCount(), data }),
  };
}

const HomeScreen = (props) => {
  /**
   * 函数组件中的props，这时便包含了一下内容
   * {
   *    counter: {
   *      count: 0
   *    },
   *    addCount: Function,
   *    subCount: Function,
   *    resetCount: Function,
   *    ...props
   * } 
   */
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>{props.counter.count}</Text>
      <Button
        title="ADD"
        onPress={() => {
          props.addCount();
        }}
      />
      <Button
        title="SUB"
        onPress={() => {
          props.subCount();
        }}
      />
      <Button
        title="RESET"
        onPress={() => {
          props.resetCount(5); //每次点击设置值为5
        }}
      />
    </View>
  );
};

// 重点: 使用connect组件对HomeScreen进行包装，以便组件内能调用dispatch以及读取state
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

同样的方式可以在其他页面组件使用，这时操作的便是同一份数据了

5. 最终效果参考

完成，如有帮助请点赞关注~