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

文档中心

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

系列教程
1.目标
2.安装依赖
3.目录设计
3.文件代码
- 3.1 store/index.js
- 3.2 store/reducers.js
- 3.3 store/counter/actionTypes.js
- 3.4 store/counter/action.js
- 3.5 store/counter/reducer.js
- 3.6 在App.js中注入
4.在页面中使用
5. 最终效果参考

系列教程

[快速上手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.安装依赖

react-redux
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个参数

state: 我们需要维护的数据object，写state = defaultState是为了初始化该值为defaultState
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以及读取stateexport default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

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

5. 最终效果参考

在这里插入图片描述

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

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