什么是 Redux？
Redux 是一个 JavaScript 应用程序的状态管理库。Redux 提供了一个可预测的状态容器，帮助开发者管理应用程序的状态。Redux 的主要思想是将整个应用程序的状态存储在一个对象中，该对象被称为「Store」。Redux 通过 Actions 和 Reducers 来管理这个「Store」。当状态发生改变时，Redux 实现了一种虚拟 DOM 来追踪状态的变化，并将变化同步到应用程序的视图中，从而实现了组件与数据的分离。
为什么要使用 Redux？
React Native 是一个强大的 UI 开发框架，但是它在应用程序状态的管理上，需要开发者在不同的组件之间通过 Props 进行数据传递，这种方式在应用程序逐渐变得复杂时，会变得难以维护。而 Redux 提供了一种便捷的方法来管理 React Native 应用程序的状态，它可以帮助我们自动化处理状态的变化，并且实现了数据与 UI 的分离，开发者只需要集中精力管理「Store」中的状态即可。
Redux 的核心概念
Actions
Action 是一个纯 JavaScript 对象，它描述了一个状态的变化事件。每个 Action 都包含一个类型和一个可选的负荷（payload），类型是一个字符串，用于描述 Action 的类型，负荷是一个任意的数据类型，用于携带 Action 的有效数据。
例如：
- ----- ------------ -------- - -
Reducers
Reducer 是一个纯函数，它用于处理 Actions 并返回一个新的状态。Reducer 接受两个参数：旧的状态和 Action 对象，然后返回一个新的状态对象。
例如：
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - ---------------
--------
------ ------
-
-Store
Store 是一个状态容器，它储存了整个应用程序的状态。在 Redux 中，所有的数据都存储在一个单一的 JavaScript 对象中，这个对象被称为「State」。开发者可以通过 Store.subscribe() 来监听 State 的变化，Store.dispatch() 来发起一个 Action。
例如：
------ - ----------- - ---- -------- ------ ------- ---- --------------------- ----- ----- - ---------------------
在 React Native 中使用 Redux
安装 Redux
首先，我们需要在我们的 React Native 项目中安装 Redux。可以通过 npm 来进行安装：
--- ------- ----- ------
编写 Reducers
在 Redux 中，Reducers 通常会编写到一个单独的文件中，我们在项目根目录下创建一个 reducers 目录，然后在该目录下创建一个 counter.js 文件，并编写一个 Reducer：
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-创建 Store
创建 Redux Store 的方法和在 Web 中创建 Store 的方法类似，我们可以使用 Redux 提供的 createStore 函数创建一个 Store：
------ - ----------- - ---- -------- ------ ------- ---- --------------------- ----- ----- - ---------------------
在组件中使用 Redux
我们将在一个 Counter 组件中使用 Redux，实现一个计数器：
------ ----- ---- --------
------ - ----------- ----- ----------------- ---- - ---- ---------------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
----- - ------ -------- - - -----------
------ -
----- -------------------------
-----------------
---------------------
----------- -- ---------- ----- ----------- ---
-
----- ----------------------------
-------------------
----- ----------------------------------
-----------------
---------------------
----------- --
----- --- - - ---- - ---------- ----- ----------- --
-
-
----- ----------------------------
-------------------
-------
--
-
-
------ ------- --------------- -- -- ------ ----------- -------------
----- ------ - -------------------
---------- -
-------------- ------
----------- ---------
--
------- -
------ ---
------- ---
------------- ---
---------------- ----------
--------------- ---------
----------- ---------
----------------- ---
--
----- -
--------- ---
------ --------
--
---在 Counter 组件中，我们使用 React-Redux 提供的 connect 函数将 Counter 组件连接到 Redux。connect 函数将自动订阅 Redux Store，任何时候如果 Store 的状态发生改变，connect 函数将自动调用 setState 方法，并将订阅的状态作为 props 传递给 Counter 组件。
通过组件的 props 我们可以访问应用程序的状态，并且通过 dispatch 方法来发起 Action。
总结
Redux 是一个功能强大的状态管理工具，它可以帮助我们在 React Native 应用程序中管理复杂的状态，并实现了数据与 UI 的分离。在 Redux 中，我们编写 Reducers 来管理应用程序的状态，然后将状态通过 Store 存储起来，最后在组件层面使用 connect 函数来连接 Store，实现状态的自动更新。希望这篇文章可以帮助你理解 Redux 的使用，从而使你的 React Native 应用程序变得更加易于管理和维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64672cd7968c7c53b0790cb4