在 React Native 中使用 Redux 完成应用状态管理
随着移动应用的普及，React Native 成为了开发高性能跨平台应用的首选框架之一。而对于大型应用来说，状态管理是一个必不可少的功能。由于这些应用要处理大量的数据和 UI 组件，因此需要一个强大而简单的工具来管理数据流。Redux 就是这样一个流行的应用程序状态管理库。
本文将介绍如何在 React Native 中使用 Redux 完成应用状态管理。
Redux 简介
Redux 是一个流行的 JavaScript 应用程序状态管理库。它提供了一种数据流模式，允许开发人员透明地管理应用程序状态。 Redux 不仅在 Web 应用程序中得到了广泛的应用，也在 React Native 应用程序中使用广泛。
Redux 通过维护一个单一的状态树，并利用纯函数来修改它来管理应用程序状态。它也提供了一个方便的 API ，以及一系列中间件来处理异步操作和日志记录等任务。
在 React Native 中使用 Redux
下面，我们将详细介绍如何在 React Native 中使用 Redux 来管理应用程序状态。
安装
首先，我们需要安装 Redux 和 React Redux。在终端中运行以下命令：
--- ------- ------ ----- -----------
创建 Redux store
然后，我们需要创建一个 Redux store 来管理应用程序状态。一个 Redux store 是一个普通的 JavaScript 对象，它通过使用 createStore() 函数来创建。store 包含了应用程序的状态，同时也包含了一些方法来更新状态。
我们可以在 src 目录下创建一个 store.js 文件，并编写以下代码：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- ------ ------- ------
在上面的代码中，我们创建了一个名为 rootReducer 的 reducer ，并将它传递给 createStore() 函数。这个 reducer 将在下文中定义。
reducers
Reducers 是 Redux 用于管理状态的关键部分，它接受一个旧的状态和一个动作对象，并返回一个新的状态。Reducers 通常是纯函数。在 Redux 中，它们被组织在一起，形成一个树状结构的 reducer。
例如，在我们的示例应用程序中，我们可以编写一个名为 todos 的 reducer ，它将在以下操作中返回新状态：
- 添加一个新的 todo
- 删除一个 todo
- 标记一个 todo 已完成
- 撤销一个已完成的 todo
- 加载 todos 列表
以下是 todos reducer 的示例代码：
----- ------------ - -
------ ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ----------- -
----- ------- - - --- ------------------ - -- ----------------- --
------ - --------- ------ ---------------- -------- --
-
---- -------------- -
----- ----- - ---------------------------- -- ------- --- -------------------
------ -
---------
------ ------------------------ ------- -------------------------- - ----
--
-
---- -------------- -
----- ----- - ---------------------------- -- ------- --- -------------------
----- ----------- - - ---------------------- ---------- ----------------------------- --
------ -
---------
------ -
----------------------- -------
------------
-------------------------- - ---
--
--
-
---- ------------ -
----- ----- - ---------------------------- -- ------- --- -------------------
----- ----------- - - ---------------------- ---------- ----------------------------- --
------ -
---------
------ -
----------------------- -------
------------
-------------------------- - ---
--
--
-
---- ------------- -
------ - --------- ------ -------------- --
-
--------
------ ------
-
--
------ ------- -------------上述代码中，我们首先定义了一个名为 initialState 的对象，它包含了应用程序的初始状态。接着，我们定义了一个名为 todosReducer 的函数，它接受一个状态和一个动作对象，并返回一个新状态。在 cases 中，我们定义了“添加一个新的 todo ”、“删除一个 todo ”、“标记一个 todo 已完成”、“撤销一个已完成的 todo”和“加载 todos 列表”操作的行为。
在最后，我们通过调用 createStore() 函数来创建 store，并将 todosReducer 传递给它。接下来，我们需要将 store 传递给我们的应用程序，以便在应用程序中使用该状态。
将 Redux store 传递给应用程序
我们可以在 index.js 文件中使用 Provider 组件将 store 传递给我们的应用程序。以下是我们完整的 index.js 文件：
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ ------- -------- ----- -
------ -
--------- --------------
----- -------------------------
------------ -------------
-------
-----------
--
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
---在上述代码中，我们首先导入 Provider 组件和我们的 store，并将 store 传递给 Provider 的 store 属性。接着，我们将 Provider 组件作为顶级组件嵌套在我们的应用程序中。
使用 Redux store
现在，我们已经成功地将 Redux store 传递给我们的应用程序，接下来我们需要在应用程序中使用它来管理状态。
我们可以使用 connect() 函数将组件连接到 Redux store。以下是一个更具体的示例：我们可以创建一个名为 TodoList 的组件，它将显示我们的待办事项列表。为了将该组件连接到 store，我们需要使用 connect() 函数和 mapStateToProps() 函数。以下是示例代码：
------ ------ - --------- - ---- --------
------ - --------- ----- ---------- - ---- ---------------
------ - ------- - ---- --------------
----- -------- - -- ----- -- -- -
------------ -- -
-- ---
-- ----
------ -
---------
------------
-------------------- -- --------
-------------- ---- -- -- ----- ----------------------------------------
--
--
--
----- ------ - -------------------
----- -
-------- ---
--
---
----- --------------- - ------- -- --
------ ------------
---
------ ------- -----------------------------------在上述代码中，我们定义了一个名为 TodoList 的函数组件，并在组件中使用了 FlatList 组件来展示我们的待办事项列表。我们还通过调用 connect() 函数将它与 Redux store 连接。它的 mapStateToProps() 函数将传递 state.todos 作为 todos 参数。
connect() 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。前者负责将 state 映射到组件的 props 上，后者负责将操作映射到 props 上。你也可以仅传递一个参数，例如我们的示例中的 mapStateToProps()。
在上述代码中，我们还使用了一个 useEffect() 钩子。当 TodoList 组件第一次渲染时，useEffect() 函数会调用传递给它的回调函数。在这里，我们可以使用 ourAction 。
初始数据载入
我们还可以通过 dispatch() 函数向 Redux store 发送 actions 来更新我们的状态。示例代码如下：
------ - ----------- - ---- --------------
------ --------- ---- --------------
----- --------- - -- -- -
----- -------- - --------------
------------ -- -
----------------------
-- ----
------ ---- ---
--在上述代码中，我们使用了 useDispatch() 钩子来获取 dispatch() 函数，并在提交 ourAction 配合 useEffect() 钩子就可以实现在组件首次渲染时就完成数据的装载。
结论
本文介绍了如何在 React Native 应用程序中使用 Redux 框架来管理应用程序状态。我们首先安装了 Redux 和 React Redux 并创建了一个 store 对象。然后，我们定义了我们的 reducer 和 connect() 函数。
最后，我们通过 Provider 组件将我们的 store 传递给我们的应用程序，并在 TodoList 组件中展示我们的待办事项列表。通过了解 Redux 的基础知识和结合以上示例代码，您可以轻松地使用 Redux 来管理您的应用程序状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f0859b6fbf96019733514d