前言
React Native 是一种基于 React 的框架，用于构建跨平台的原生应用程序。虽然 React Native 可以帮助我们创建高度可重用的组件，但是在构建大型应用程序时，我们需要更好的状态管理工具来管理全局状态和状态共享。Redux 是一种优秀的状态管理工具，它可以帮助我们轻松地管理应用程序的状态。
在本文中，我们将探讨如何在 React Native 中使用 Redux 管理应用程序的全局状态和状态共享。
Redux 概述
Redux 是一个可预测的状态容器，用于 JavaScript 应用程序。它可以帮助我们管理应用程序的状态，使得我们可以轻松地跟踪应用程序的状态变化。Redux 的核心概念是 Store、Action 和 Reducer。
Store
Store 是 Redux 中的状态容器，它存储应用程序的状态。Store 是一个对象，它包含整个应用程序的状态。我们可以使用 createStore 函数来创建一个 Store。
Action
Action 是一个普通的 JavaScript 对象，它描述了应用程序中发生的事件。Action 包含两个属性：type 和 payload。type 属性描述了 Action 的类型，payload 属性描述了 Action 的负载。
Reducer
Reducer 是一个纯函数，它接受一个旧的状态和一个 Action，并返回一个新的状态。Reducer 应该是纯函数，这意味着它不应该修改传入的状态，也不应该有任何副作用。
在 React Native 中使用 Redux
在 React Native 中使用 Redux 需要安装 redux、react-redux 和 redux-thunk 三个包。redux 包是 Redux 的核心库，react-redux 包提供了与 React 组件的连接，redux-thunk 包是 Redux 的中间件，它允许我们编写异步 Action。
创建 Store
我们可以使用 createStore 函数来创建一个 Store。在 React Native 中，我们通常会在 App.js 文件中创建 Store。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -----------------
----- ----- - ------------------------ ------------------------
------ ------- -------- ----- -
------ -
--------- --------------
----- --
-----------
--
-在上面的代码中，我们首先导入 createStore、applyMiddleware 和 rootReducer。然后，我们使用 createStore 函数创建一个 Store，rootReducer 是一个 Reducer，它将处理所有的 Action。我们还使用 applyMiddleware 函数将 redux-thunk 中间件添加到 Store 中。最后，我们使用 Provider 组件将 Store 传递给 Main 组件。
创建 Reducer
Reducer 是一个纯函数，它接受一个旧的状态和一个 Action，并返回一个新的状态。在 React Native 中，我们通常会将所有的 Reducer 放在一个 reducers.js 文件中。
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - -------------------- -------------------- ------------------- - ---- -------------------
----- ------------ - -
-------- ------
------ ---
------ ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- -----
--
---- --------------------
------ -
-------- ------
------ ---------------
------ ---
--
---- --------------------
------ -
-------- ------
------ ---
------ ---------------
--
--------
------ ------
-
--
------ ------- -----------------
------ -------------
---在上面的代码中，我们首先导入 combineReducers 函数和 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS、FETCH_POSTS_FAILURE 三个 Action 的类型。然后，我们定义了一个初始状态 initialState，它包含了 loading、posts 和 error 三个属性。接下来，我们定义了一个 postsReducer，它接受一个旧的状态 state 和一个 Action，根据 Action 的类型返回一个新的状态。最后，我们将 postsReducer 传递给 combineReducers 函数，并将其导出。
创建 Action
Action 是一个普通的 JavaScript 对象，它描述了应用程序中发生的事件。在 React Native 中，我们通常会将所有的 Action 放在一个 actions.js 文件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------------- -------------------- ------------------- - ---- ----------
------ ----- ----------------- - -- -- -
------ -
----- --------------------
--
--
------ ----- ----------------- - ------- -- -
------ -
----- --------------------
-------- ------
--
--
------ ----- ----------------- - ------- -- -
------ -
----- --------------------
-------- ------
--
--
------ ----- ---------- - -- -- -
------ ---------- -- -
------------------------------
-----
--------------------------------------------------
---------------- -- -
----- ----- - --------------
-----------------------------------
--
-------------- -- -
----- -------- - --------------
--------------------------------------
---
--
--在上面的代码中，我们首先导入 axios 和 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS、FETCH_POSTS_FAILURE 三个 Action 的类型。然后，我们定义了三个 Action：fetchPostsRequest、fetchPostsSuccess 和 fetchPostsFailure。fetchPostsRequest 和 fetchPostsFailure Action 分别返回 FETCH_POSTS_REQUEST 和 FETCH_POSTS_FAILURE 两个 Action 的类型。fetchPostsSuccess Action 返回 FETCH_POSTS_SUCCESS Action 的类型和一个负载，负载是从 API 获取的帖子列表。最后，我们定义了一个异步 Action fetchPosts，它接受 dispatch 函数作为参数，并在获取帖子列表时调用 dispatch 函数。
连接组件
我们可以使用 connect 函数将组件连接到 Store。在 React Native 中，我们通常会将所有的组件放在一个 components 文件夹中。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- --------------
------ - ---------- - ---- --------------------------
----- ----- - -- -------- ------ ------ ---------- -- -- -
------------ -- -
-------------
-- ----
------ -
------
-------- - -
-----------------------
- - ----- - -
--------------------
- - -
---------------- -- -
----- --------------
---------- ------------
-------
--
--
-------
--
--
----- --------------- - ------- -- -
------ -
-------- --------------------
------ ------------------
------ ------------------
--
--
----- ------------------ - ---------- -- -
------ -
----------- -- -- -----------------------
--
--
------ ------- ------------------------ ---------------------------在上面的代码中，我们首先导入 React、View、Text 和 connect 函数。然后，我们定义了一个 Posts 组件，它接受 loading、posts、error 和 fetchPosts 四个属性。我们使用 useEffect Hook 和 fetchPosts Action 在组件加载时获取帖子列表。最后，我们使用 mapStateToProps 函数将 store 中的状态映射到组件的属性，使用 mapDispatchToProps 函数将 Action 映射到组件的属性，并使用 connect 函数将组件连接到 Store。
总结
在本文中，我们探讨了如何在 React Native 中使用 Redux 管理应用程序的全局状态和状态共享。我们首先介绍了 Redux 的核心概念：Store、Action 和 Reducer。然后，我们讨论了如何在 React Native 中创建 Store、Reducer 和 Action。最后，我们介绍了如何使用 connect 函数将组件连接到 Store，并映射状态和 Action 到组件的属性。
Redux 是一个非常强大的状态管理工具，它可以帮助我们轻松地管理应用程序的状态。在构建大型应用程序时，使用 Redux 可以使代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bdbe2eb4cecbf2d1243c3