本文将介绍如何在 ReactNative 中使用 Redux 进行状态管理，同时通过一个小示例展示 Redux 在 RN 中的实际应用。本文旨在帮助初学者更好地了解和使用 Redux，同时提供一些参考和指导。
Redux 简介
Redux 是一个基于 Flux 架构的状态管理工具，其核心思想是将应用程序中的数据（即状态）与 UI 分离开来，使得状态的变更更加可控、可追溯、可复用。Redux 的基本组成部分包括：Store、Action、Reducer 和 Middleware。
- Store：维护应用程序的状态，通过 dispatch 方法触发 action 来更新状态，同时提供 getState 方法供外部获取状态。
- Action：描述状态的变化，包括 type 和 payload 两个属性，type 用于标识当前 action 的类型，payload 用于携带变化的数据。
- Reducer：描述状态的变化逻辑，接收当前状态和 action 作为参数，返回新的状态，拥有纯函数的特性。
- Middleware：处理 action 和 reducer 之间的交互，可以对 action 进行一些处理，例如异步请求、日志输出等等。
ReactNative 中使用 Redux
在 ReactNative 中使用 Redux 的流程和 React 中基本相同，只需要在主组件中引入 Store，并将 App 组件包裹在 Provider 中即可。以下是实现的具体步骤：
1. 安装、引入和创建 Store
安装 Redux 和 React-Redux：
npm install redux react-redux
在主组件中引入 createStore 和 combineReducers 方法，创建 Store：
import { createStore, combineReducers } from 'redux' const rootReducer = combineReducers({ // 将所有 reducer 模块合并成一个 rootReducer }) const store = createStore(rootReducer)
2. 创建 Action
创建 action 示例：
const addTodo = (text) => ({ type: 'ADD_TODO', payload: { text } // 携带要添加的 todo 内容 })
3. 创建 Reducer
创建 reducer 示例：
-- -------------------- ---- ------- ----- --------- - - ------ -- - ----- ----------- - ------ - ---------- ------- -- - ------ ------------- - ---- ----------- ----- - ---- - - -------------- ------ - --------- ------ - --------------- - ---- - - - -------- ------ ----- - - ------ ------- -----------展开代码
4. 创建 Middleware
创建 middleware 示例：
const loggerMiddleware = store => next => action => { console.log('dispatching', action) let result = next(action) console.log('next state', store.getState()) return result }
5. 包裹应用程序
将应用程序包裹在 Provider 组件中，并将 Store 传入：
import { Provider } from 'react-redux' <App />
<Provider store={store}> <App /> </Provider>
6. 连接 Component 和 Store
使用 connect 方法将组件与 Store 连接起来：
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- --------------- - ----- -- -- ------ ----------- -- ----- ------------------ - -------- -- -- -------- ---- -- ----------------------- -- ------------------------ ------------------------------展开代码
Redux 实际应用
最后来一个小示例，看看 Redux 在 ReactNative 中的实际应用。这个示例是一个任务列表，可以添加、删除和修改任务，任务数据使用 AsyncStorage 存储到本地。
源码地址
Github: https://github.com/TechoGod/ReactNative-TodoList-Redux
实现步骤
该示例主要包含以下几个部分：
- 实现 Store 和 rootReducer
- 实现 Action 和 Reducer
- 创建组件，使用 connect 方法连接组件和 Store
- 实现添加、删除和修改任务的功能
源码中的每个部分都有详细的注释，可以参考下面的代码示例。
Store 和 Reducer
创建 Store 和 rootReducer：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- ------- ------ ----- ---- ------------- ------ ----------- ---- ------------------------ ----- ----------- - ----------------- ------ ----------- -- ----- ----------- - ------- ----- ----- - ------------ ------------ ------------------------------- - ------ ------- -----展开代码
创建 todoReducer：
-- -------------------- ---- ------- ----- --------- - - ----- --- -------- ----- - ----- ----------- - ------ - ---------- ------- -- - ------ ------------- - ---- ----------- ----- - ---- - - -------------- ------ - --------- ----- - -------------- - ----- --- ---------- - - - ---- -------------- ----- - -- - - -------------- ------ - --------- ----- ---------------------- -- ------- --- --- - ---- -------------- ----- - --- ------- ----- ------- - - -------------- ------ - --------- ----- ------------------- -- - -- -------- --- ------- - --------- - ------- - ------ ---- -- - ---- -------------------- ------ - --------- -------- ---- - ---- -------------------- ----- - ---- - - -------------- ------ - --------- -------- ------ ---- - ---- -------------------- ------ - --------- -------- ----- - -------- ------ ----- - - ------ ------- -----------展开代码
Action
创建 ActionCreator：
-- -------------------- ---- ------- ------ - ------------ - ---- -------------- ------ - -------- --------- ------------ ------------ --------- - ---- -------------------------- -- ---- ------ ----- ------- - ------ -- -- ----- --------- -------- - ---- - -- -- ---- ------ ----- ---------- - ---- -- -- ----- ------------ -------- - -- - -- -- ---- ------ ----- ---------- - ---- ----- -- -- ----- ------------ -------- - --- ---- - -- -- ---- ------ ----- -------- - -- -- ----- ---------- -- - ---------- ----- ------- -- --- - ----- ---- - ----- ------------------------------ ---------- ----- ---------- -------- - ----- ---- - ---------------- - -- - -- - ----- ------- - ------------------ - -展开代码
组件
创建 TaskList 组件：
-- -------------------- ---- ------- ------ ------ - --------- - ---- ------- ------ - ----- ----- --------- ----------- ---------- ---------------- - ---- -------------- ------ - ------- - ---- ------------- ------ - -------- ----------- ----------- -------- - ---- ----------------------- ----- -------- ------- --------- - ----- - - ---------- -- - ----------------- -- - -- ---- --------------------- - ----------------- - ---- -- - --------------- ---------- ---- -- - ------------- - -- -- - ----- - --------- - - ---------- -- ----------- - -- ---- ----------------------------- --------------- ---------- -- -- - - ---------------- - -- -- - -- ---- ------------------------- - ---------------- - ---- ----- -- - -- ---- ------------------------- ----- - ------ -- - ----- - --------- - - ---------- ----- - ----- ------- - - ---------- ------ - ----- ------------------------- ----- ------------------------------ ---------- -------------------- ------------------------------------- ----------------- -- ----------------- ----------------------------- ----- --------------------------------- ------------------- ------- -------- -- ----- --------------------------------------------- --------- ----------- -------------------- -- ------------------- -------------- ---- -- -- - ----- ------------------------ ---------- --------------------------- ----------------- -------------------- -- ------------------------------ ------ -- ----------------- ----------- -- -------------------------------- ----- ------------------------------------ ------------------- ------- -- -- ------- - - - ----- --------------- - ----- -- -- ----- ----------------- -------- ------------------- -- ----- ------------------ - -------- -- -- -------- ------ -- ------------------------ ----------- ---- -- ------------------------- ----------- ---- ----- -- ----------------------- ------- --------- -- -- -------------------- -- ------ ------- ------------------------ ----------------------------- ----- ------ - ------------------- ---------- - ----- -- ---------------- ------- ----------- --- ------------------ -- -- --------------- - -------------- ----- -- ------ - ----- -- ------------ ------- ------------ -- ------------- -- -------- --- ------------ --- --------- -- -- ---------- - --------- --- ------ ------ -- ------------ - --------- --- ---------- --------- ---------- -- -- --------- - -------------- ------ ----------- --------- --------------- -- -- ------------- - ----- -- ------------ ------- ------------ -- ------------- -- -------- --- ------------ --- --------- -- -- ------------- - --------- --- ------ ----- - --展开代码
成果展示
最后，让我们来看看我们的成果：
小结与展望
本文介绍了如何在 ReactNative 中使用 Redux 进行状态管理以及对 Redux 的一些概念进行了简单的解释。同时，通过一个小示例，演示了 Redux 在 ReactNative 中的实际应用。希望这篇文章能为初学者提供一些指导和参考，同时也希望读者能更深入地研究 Redux 的源码，提高技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c037f6314edc2684676e07
