React Native 是一种流行的跨平台移动应用程序开发框架，它使用了许多 React 的核心概念，如组件、props 和 state。Redux 是一种流行的状态管理工具，它可以帮助我们更好地组织和管理应用程序的状态。在本文中，我们将介绍如何在 React Native 中构建基础 Redux 架构。
什么是 Redux？
Redux 是一个 JavaScript 应用程序状态管理工具。它可以帮助我们更好地组织和管理应用程序的状态。Redux 的核心概念是将应用程序状态存储在单一的状态树中。应用程序中的所有状态都存储在一个对象中，并且只能通过触发一个动作来更新状态。这使得应用程序状态变得可预测和可维护。
Redux 有三个核心概念：
- store：存储应用程序状态的对象。
- action：描述状态变化的对象。
- reducer：根据动作更新状态的函数。
在 React Native 中使用 Redux
要在 React Native 中使用 Redux，我们需要安装以下 npm 包：
- redux
- react-redux
我们可以使用以下命令来安装这些包：
npm install redux react-redux --save
在我们开始编写代码之前，让我们先看一下 Redux 架构的基本流程：
- 应用程序中的用户触发一个动作。
- 动作被发送到 Redux store。
- store 调用 reducer 并传递当前状态和动作。
- reducer 根据动作更新状态。
- store 通知所有连接的组件状态已更新。
- 连接的组件可以从 store 中获取新的状态。
现在，让我们开始编写代码。
编写 Redux Store
我们需要创建一个 Redux store 来存储应用程序的状态。我们可以使用以下代码来创建一个简单的 store：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;在上面的代码中，我们使用 createStore 函数来创建一个 store。rootReducer 是一个函数，它接收当前状态和动作并返回新状态。我们将在下一节中编写 rootReducer 函数。
编写 Reducer
Reducer 是一个函数，它接收当前状态和动作并返回新状态。我们可以使用以下代码来编写一个简单的 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
------ ------- ------------在上面的代码中，我们定义了一个初始状态 initialState，它包含一个名为 count 的属性。我们还定义了一个 rootReducer 函数，它接收当前状态和动作并返回新状态。在 INCREMENT 动作中，我们增加 count 属性的值。在 DECREMENT 动作中，我们减少 count 属性的值。在默认情况下，我们返回当前状态。
连接组件和 Store
我们可以使用 react-redux 包中的 connect 函数将组件连接到 Redux store。我们可以使用以下代码来连接组件和 store：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- ------- ---- - ---- ---------------
-------- -------------- -
------ -
------
------------ --------------------
------- ----------------- ------------------------- --
------- ----------------- ------------------------- --
-------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们定义了一个名为 Counter 的组件。我们还定义了两个函数 mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数将当前状态映射到组件的属性。mapDispatchToProps 函数将动作映射到组件的属性。最后，我们使用 connect 函数将 Counter 组件连接到 store。
示例
让我们看一个完整的示例。在这个示例中，我们将创建一个简单的计数器应用程序，该应用程序使用 Redux 来管理状态。
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ------- ---- ------------
------ ------- -------- ----- -
------ -
--------- --------------
----- -------------------------
-------- --
-------
-----------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---在上面的代码中，我们创建了一个名为 App 的组件。我们使用 Provider 组件将 store 注入到应用程序中。我们还将 Counter 组件放置在 View 组件中。
Counter.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- ------- ---- - ---- ---------------
-------- -------------- -
------ -
------
------------ --------------------
------- ----------------- ------------------------- --
------- ----------------- ------------------------- --
-------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们创建了一个名为 Counter 的组件。我们使用 connect 函数将 Counter 组件连接到 store。我们还定义了两个函数 mapStateToProps 和 mapDispatchToProps。
store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;在上面的代码中，我们创建了一个名为 store 的 Redux store。我们使用 createStore 函数来创建 store。我们还将 rootReducer 函数作为 store 的参数。
reducers.js
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
------ ------- ------------在上面的代码中，我们定义了一个初始状态 initialState，它包含一个名为 count 的属性。我们还定义了一个 rootReducer 函数，它接收当前状态和动作并返回新状态。在 INCREMENT 动作中，我们增加 count 属性的值。在 DECREMENT 动作中，我们减少 count 属性的值。在默认情况下，我们返回当前状态。
结论
在本文中，我们介绍了如何在 React Native 中构建基础 Redux 架构。我们了解了 Redux 的核心概念，包括 store、action 和 reducer。我们还学习了如何在 React Native 中使用 Redux，并编写了一个简单的计数器应用程序。这个应用程序使用 Redux 来管理状态，演示了如何将组件连接到 store，并编写了一个简单的 reducer。我们希望这篇文章可以帮助你更好地理解 Redux 的基础知识，并在 React Native 中使用它来管理状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67459686c1a23897eaa1666c