Redux 是一种可靠的状态管理库，通常用于 React 和 React Native 应用程序开发。在 React Native 中使用 Redux 可以帮助开发人员更好地管理应用程序的状态。
本教程将重点介绍如何在 React Native 应用程序中使用 Redux。了解 React 和 Redux 的基础知识是前提。本教程将包含以下主题：
- 设置 Redux
- 创建 Actions 和 Reducers
- 连接 React Native 应用程序和 Redux
- 使用 Redux Thunk 中间件
- 状态持久化
设置 Redux
首先，需要安装 Redux 和 react-redux 依赖项。
npm install -S redux react-redux
此外，还需要安装 Redux DevTools 扩展程序，以便开发人员能够更好地跟踪应用程序的状态。
在设置中添加 Redux DevTools 扩展程序
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers from './reducers';
const store = createStore(reducers, composeWithDevTools());这使我们能够使用浏览器中的 Redux DevTools 来跟踪和查看应用程序的状态。
创建 Actions 和 Reducers
在创建 Redux 应用程序时，需要定义 Action 类型和 Action 创建函数。例如，下面是一个名为 setUsername 的 Action，它应包含一个字符串类型的值。
const setUsername = (username) => {
return {
type: 'SET_USERNAME',
payload: username
}
}要处理这个 Action，需要一个 Reducer。创建 Reducer 时，需要为每个 Action 类型定义一个 case 语句。例如，下面是一个名为 username 的 Reducer。
-- -------------------- ---- -------
----- ------------ - -
--------- ---
--
----- -------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--连接 React Native 应用程序和 Redux
为了在 React Native 中使用 Redux，需要连接应用程序和 Redux store。使用 Provider 组件可以将 store 提供给应用程序，如下所示。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----- ------------ - -- -- -
--------- --------------
---- --
-----------
--
------ ------- -------------此外，在需要访问 store 中状态的组件中使用 connect 函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- - -- -------- -- -- -
------ -
------
-------------- ------------------
-------
--
--
----- --------------- - ------- -- --
--------- ---------------
---
------ ------- -------------------------------使用 Redux Thunk 中间件
有时，需要在 action 中执行异步代码。例如，从 API 获取数据。默认情况下，Action 是同步的。Redux Thunk 中间件允许异步 action creator 返回函数，而不是对象。
使用 Redux Thunk 中间件，可以将异步操作封装在函数中，以确保调用 action creator 时异步执行，如下所示。
const setUsernameAsync = (username) => {
return (dispatch) => {
setTimeout(() => {
dispatch(setUsername(username));
}, 2000);
};
};在组件中调用 setUsernameAsync 函数，如下所示。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------------- - ---- ------------
----- ----- - -- -------- -- -- -
----- ---------- ------------ - -------------
----- -------- - -- -- -
-------------------------------------
--
------ -
------
----------
------------------ ---- ---------
-------------------- -- ------------------
--
------- -------------- ------------------ --
-------
--
--
------ ------- -----------------状态持久化
通过使用 Redux 创建应用程序，开发人员可以在不同的组件和层之间共享数据。然而，如果应用程序被关闭并重新打开，存储在 store 中的状态将丢失。为了在应用程序重启后保持状态，需要对状态进行持久化。
可以使用 Redux Persist 库对状态进行持久化。Redux Persist 库可将状态保存在本地存储中，并在下次加载应用程序时加载状态。下面是一个简单的配置示例。
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- ---------------- ------ ------------ ---- -------------------------------------------- ----- ------------- - - ---- ------- -------- ------------- -- ----- ---------------- - ----------------------------- ---------- ----- ----- - ----------------------------- ----------------------- ----- --------- - -------------------- ------ - ------ --------- --
结论
在 React Native 应用程序中使用 Redux 可以有效地组织和管理状态。Redux 是一个庞大的库，本教程仅强调了 Redux 的一些基本方面。使用 Redux，我们可以更好地管理应用程序的状态，使开发人员更容易调试和维护应用程序的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722d6ce2e7021665e0d1ffe