[快速上手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