Redux 是一个非常流行的 JavaScript 状态管理库，它可以帮助我们更好地组织、管理应用程序中的状态。而 React Native 是一个跨平台的手机应用程序开发框架，可以帮助我们使用 JavaScript、React 和本机组件构建本机 iOS 和 Android 应用程序。
因此，当我们在 React Native 中使用 Redux 时，可以帮助我们更好地组织和管理应用程序中的状态。在本文中，我们将介绍如何在 React Native 中使用 Redux，并提供示例代码。
安装依赖
首先，我们需要使用 npm 安装一些依赖项。我们需要安装 react-redux、redux-thunk 和 redux-persist：
npm install redux react-redux redux-thunk redux-persist --save
创建 Redux Store
接下来，我们需要创建 Redux Store。在 React Native 中，我们可以像在 React 应用程序中一样创建 Store。这里我们将简单地创建一个 Store 以供演示：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ------------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ----------------------------- ------------------------ ----- --------- - -------------------- ------ - ------ --------- --
在此示例中，我们创建了一个 Redux Store，从 redux 中导入 createStore 和 applyMiddleware，从 redux-persist 中导入 persistStore 和 persistReducer 以进行状态持久化，从 redux-thunk 中导入 thunk 来支持异步操作，最后从我们自己的 reducers 中导入 rootReducer。
我们还使用了 AsyncStorage 来实现状态持久化。可以使用其他存储引擎，如 localForage、redux-observable 等。
使用 Provider 组件
在 React Native 中，我们将使用 Provider 组件来连接我们的组件和 Redux Store。 Provider 组件在 React-Redux 中定义，我们导入它并使用它包装组件树：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------ --------- - ---- ----------
------ - ----------- - ---- ----------------------------------
------ --------- ---- -----------
------ ------- -------- ----- -
------ -
--------- --------------
------------ -------------- ----------------------
---------- --
--------------
-----------
--
-Provider 组件的主要作用是将 Redux Store 暴露给下面的组件。PersistGate 组件是可选的，它可以在加载 Store 时显示加载屏幕，直到 Store 加载完成。
配置 rootReducer
在我们的 redux 应用程序中，我们将编写多个 reducer 函数，然后使用 rootReducer 将它们组合在一起，以便我们可以将它们传递给 createStore 函数。它看起来像这样：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ ----------- ---- ----------------- ------ -------------- ---- -------------------- ----- ----------- - ----------------- ----- ------------ -------- --------------- --- ------ ------- ------------
在此示例中，我们将 authReducer 和 profileReducer 组合成一个 rootReducer。在更大型的应用程序中，您可以将拆分 reducer 以减少应用程序的维护难度。
编写 Actions 和 Reducers
接下来，我们需要编写 action creators 和 reducers。在 React Native 应用程序中和在 React 应用程序中非常相似。
例如，在我们的 auth.reducer.js 文件中，我们可以这样编写 reducer 函数：
-- -------------------- ---- ------- ------ - -- ----------- ---- ----------------- ----- ------------ - - ---------- ------ ---------------- ------ ----- ----- --------- ----- -- ------ ----- ----------- - ------ - ------------- ------- -- - --- -
在这个例子中，我们定义了一个名为 authReducer 的 reducer 函数。它包括一个初始状态 initialState 和一个 action 对象。在这个 reducer 中，我们将使用 switch 语句根据不同的 actionType 执行操作：
-- -------------------- ---- -------
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------------
------ -
---------
---------- -----
---------------- ------
----- -----
--------- -----
--
---- --------------------------
------ -
---------
---------- ------
---------------- -----
----- ---------------
--------- -----
--
---- --------------------------
------ -
---------
---------- ------
---------------- ------
----- -----
--------- ---------------
--
---- -------------------
------ -
---------
---------- ------
---------------- ------
----- -----
--------- -----
--
--------
------ ------
-
--将 Actions 映射到组件
现在我们已经编写了 action creators 和 reducers，我们可以将它们映射到我们的组件中。在 React Native 应用程序中，这里的步骤与 React 应用程序中的类似。
在我们的 LoginForm 组件中，我们可以这样定义 mapDispatchToProps：
-- -------------------- ---- ------- ------ - ----- - ---- -------------------------- ----- --------- ------- --------- - --- - ----- ------------------ - - ------ -- ------ ------- ------------- -------------------------------
在 mapDispatchToProps 中，我们将 login action creator 绑定到 LoginForm 组件中。这使我们的组件能够发起登录调用并将其链接到我们的 Store 中。
将 State 映射到组件
我们已经将 actions 映射到组件中，我们现在需要将 State 映射到组件中。在 React Native 应用程序中，这与在 React 应用程序中一样。
在我们的 ProfileScreen 组件中，我们可以这样定义 mapStateToProps：
-- -------------------- ---- ------- ------ - ------ - ---- -------------------------- ----- ------------- ------- --------- - --- - ----- --------------- - ----- -- -- ----- ---------------- --- ----- ------------------ - - ------- -- ------ ------- ------------------------ -----------------------------------
在 mapStateToProps 中，我们将我们的用户数据（来自 authReducer）与我们的组件中的变量链接起来。这允许我们显示用户信息。
结论
在本文中，我们已经介绍了如何在 React Native 中使用 Redux。我们从创建 Redux Store 开始，继续使用 Provider 组件将我们的 Store 暴露给下面的组件，定义 rootReducer 和 actions 和 reducers，最后将它们映射到我们的组件中。我们的示例代码演示了如何构建一个简单的应用程序，但是您可以随意拓展并结合您的具体需求使用 Redux。
在 React Native 中使用 Redux 可以大大简化您的状态管理，并帮助您更好地组织和管理您的应用程序状态。希望这篇文章可以为您介绍 React Native 和 Redux 结合使用提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670337cad91dce0dc84a6817