Redux 是一款用于管理应用程序状态的强大工具。它是 React 和 React Native 生态系统中最流行的状态管理库之一。使用 Redux 可以使代码更加可维护，更易于测试和重构。在本文中，我们将讨论如何在 React Native 项目中使用 Redux。
安装 Redux
在开始之前，我们需要安装 Redux。你可以使用下面的命令在你的项目中安装它：
--- ------- ----- -----------
应用程序状态
在 React Native 应用程序中，应用程序状态指的是在应用程序中共享的数据。在 Redux 中，这些数据保存在一个特殊的对象中，称为“store”。我们可以使用 Redux 提供的 API 来更新这些数据。
在本文中，我们将编写一个示例应用程序，用于显示和更新应用程序设置。我们将使用 Redux 来存储和维护应用程序状态。
创建 Redux Store
我们需要创建一个 Redux store 来管理应用程序状态。您可以在应用程序的主入口文件中创建它。在示例应用程序中，我们将在 app.js 文件中创建它。我们需要导入必要的依赖项：
------ - ----------- - ---- -------- ------ - -------- - ---- --------------
接下来，我们需要定义我们的状态并为它们提供初始值。在示例应用程序中，我们将定义 settings 状态并为其提供一个初始对象。我们在 app.js 文件中添加以下代码：
----- ------------ - -
--------- -
------------------ ------
-------------------- -----
--------- -----
--
--我们还需要一个 reducer 函数来处理各种应用程序操作。在示例应用程序中，我们将创建一个名为 settingsReducer 的 reducer。
----- --------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------- -
------ -
---------
--------- -
------------------
------------------ ---------------
--
--
-
---- ------------------- -
------ -
---------
--------- -
------------------
-------------------- ---------------
--
--
-
---- --------------- -
------ -
---------
--------- -
------------------
--------- ---------------
--
--
-
--------
------ ------
-
--settingsReducer 函数将处理 SET_DARK_MODE、SET_NOTIFICATION 和 SET_LANGUAGE 操作。每个操作都会更新 settings 状态的一部分。对于每个操作，我们都会创建一个新的状态对象并返回它。
现在我们可以使用 createStore 函数来创建一个 store。我们将使用 settingsReducer 函数来处理我们的应用程序状态。在示例应用程序中，我们将在 app.js 文件中添加以下代码：
----- ----- - -----------------------------
我们还需要将 store 提供给我们的 React 应用程序。我们可以使用 Provider 组件提供 store。
----- --- - -- -- -
--------- --------------
--------------- --
-----------
--我们的 Redux store 现在已准备就绪并可以在我们的应用程序中使用。
在组件中使用 Redux
在我们的 React Native 应用程序中，我们将创建一个名为 SettingsScreen 的组件，该组件将从 Redux store 中获取应用程序状态，并使用户能够修改应用程序设置。在 SettingsScreen 组件中，我们将使用 useSelector 和 useDispatch 钩子来获取和更新 Redux store 中的状态。
首先，我们需要从 Redux store 中获取应用程序状态。我们可以使用 useSelector 钩子来实现这一点。在 SettingsScreen 的组件内部，我们可以添加以下代码：
------ - ----------- - ---- --------------
----- -------------- - -- -- -
----- -------- - ------------------- -- ----------------
------ -
-- ---
--
--useSelector 钩子需要一个参数，该参数是一个函数，该函数接收整个 Redux store 状态并返回所需状态属性。在示例应用程序中，我们只需要 settings 属性。
接下来，我们需要更新我们的设置。我们将使用 useDispatch 钩子来派发 Redux 操作。我们可以添加以下代码：
------ - ----------- - ---- --------------
----- -------------- - -- -- -
----- -------- - ------------------- -- ----------------
----- -------- - --------------
----- -------------------- - ----------- -- -
----------
----- ----------------
-------- ----------
---
--
----- ------------------------ - ----------- -- -
----------
----- -------------------
-------- ----------
---
--
----- -------------------- - ------- -- -
----------
----- ---------------
-------- ------
---
--
------ -
-- ---
--
--useDispatch 钩子返回一个 dispatch 函数，该函数可用于将操作分派到 Redux store。在示例应用程序中，我们将使用三个处理程序：handleDarkModeToggle、handleNotificationToggle 和 handleLanguageChange。每个处理程序将派发一个具有相应类型和数据的操作。
接下来，我们需要使用 settings 和处理程序来呈现 SettingsScreen 组件。我们可以使用 Switch、Picker 和其他 React Native 组件来实现这一点。在示例应用程序中，我们将添加以下返回语句：
------ -
----- -------------------------
----- -----------------------
---------- -----------
------- ---------------------------------- ------------------------------------ --
-------
----- -----------------------
-------------------------
------- ------------------------------------ ---------------------------------------- --
-------
----- -----------------------
---------------------
------- --------------------------------- -------------------------------------
------------ --------------- ---------- --
------------ -------------- ---------- --
------------ -------------- ---------- --
---------
-------
-------
--现在我们可以在 Redux store 中管理我们的应用程序状态，并使用 useSelector 和 useDispatch 钩子来更新状态。我们的示例应用程序现在可以在设置屏幕上更改应用程序设置。
结论
在本文中，我们介绍了如何在 React Native 应用程序中使用 Redux。我们创建了一个 Redux store 来管理我们的应用程序状态，并使用 useSelector 和 useDispatch 钩子来访问和更新状态。我们的示例应用程序显示了如何在应用程序中使用 Redux 来管理应用程序状态。
Redux 是一个功能强大的状态管理库，是 React 和 React Native 生态系统中最流行的之一。使用 Redux 可以帮助您的代码更易于维护和测试。希望本文能够为您提供一个好的起点，来开始在 React Native 项目中使用 Redux。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6717060fad1e889fe21f29d9