前言
React Native（以下简称 RN）由 Facebook 开发和维护，旨在为开发人员提供易于使用的工具和技术来开发高质量的移动应用程序。Redux 是一种流行的状态管理库，它是一种 JavaScript 库，可以帮助我们更好地结构化和组织应用程序中的数据流。
在本文中，我们将介绍 Redux 在 React Native 中的使用，并提供一些样例代码来帮助您更好地理解这些概念。
Redux 的工作原理
Redux 库有三个核心概念：store、action 和 reducer。
- Store： 存储应用程序的状态数据。
- Action： 描述了发生了什么，是一个普通的 JavaScript 对象。
- Reducer： 是一个纯函数，用来更新状态数据。
组件将分派 action，告诉 reducer 更新 store 中的状态数据。Store 中的状态数据更新后，将触发组件重新渲染，以反映更新后的状态。下面是 Redux 数据流的工作流程图：
-- -------------------- ---- -------
---------------- -------- ------------
- - ---------------- -
- --------- - - ------ -
- ------------------- -
---------------- ------------
-
- ----- ------- ------------
--------------------- - -
- - ------- -
- - -
- ------------
-
-
----------------
- -
- ----- -
- -
----------------让我们跳过该理论的其他部分，直接考虑如何将 Redux 应用于 React Native 项目中。
React Native 中使用 Redux
首先，您需要在 React Native 项目中安装 Redux 库。您可以使用 NPM 安装。
npm install redux
Redux 应该与您的应用程序的顶层组件集成。稍后，我们将创建一个 Redux 子系统，然后将其添加到我们的应用程序中。
Redux 使用单独的存储 store 来管理应用程序的状态。Store 是通过传递 reducer 函数创建的。在 Redux 应用中，一般有一个 reducer 的文件夹，其下有多个 reducer 文件，分别用来管理不同的状态，例如登录状态、购物车状态等。
下面是一个简单的 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------------在上面的 reducer 中，我们定义了一个 initialState 对象，表示当前状态数据的初始值。然后我们定义一个纯函数，这个函数名字叫做 reducer，并且它接受两个参数。第一个参数是状态数据对象，第二个参数是 action 对象。
在 reducer 中，我们使用 switch 语句来根据 action.type 来更新 state 的不同属性值。如果没有匹配到 action.type，我们将直接返回旧的 state。
将这个 reducer 文件和其他 reducer 文件都放到 reducer 文件夹下后，我们需要再创建一个 rootReducer 文件，将它们合并。
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
const rootReducer = combineReducers({
counter: counterReducer,
});
export default rootReducer;上面的 rootReducer 文件使用了 Redux 提供的 combineReducers 函数来合并不同的 reducer。其中，我们将counterReducer 设置为“counter”属性，这将在我们稍后的代码中很有用。
现在，我们已经准备好将此 store 加载到我们的 React Native 应用程序中了。
import { createStore } from 'redux';
import rootReducer from './reducers'
const store = createStore(rootReducer);以上代码中，我们首先导入 createStore 方法和 rootReducer。在 store 中，我们将 rootReducer 传递给 createStore 函数，以创建我们的 Redux store。
接下来，我们在 React Native 应用程序中使用 Provider 组件，它是 Redux 中提供的 React 组件。Provider 组件将您的 Redux store 注入到应用程序中的所有组件中。
import { Provider } from 'react-redux';
import App from './App';
const AppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
);在上面的代码中，我们通过使用 Provider 组件将 store 注入到 AppComponent 组件中。我们需要将应用程序作为 Provider 的子组件来使用。现在，可以像平常一样创建组件，其中包含了关于 store 的信息。
在组件中，我们可以使用 connect 函数来连接 store 和组件。
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------------- - ----- -- --
------ --------------------
--
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
------
------------ --------------
------- ----------- -- ------------ ----------------- --
------- ----------- -- ------------ ----------------- --
-------
--
-
-
------ ------- ------------------------ -----------------------------mapStateToProps() 函数告诉 connect 希望从 store 中提取哪些部分，它将 store 中的“counter”属性的“count”属性返回为组件的一部分。mapDispatchToProps() 函数定义了一些将由 connect 传递给组件的 action 属性，以便于组件通过 dispatch 修改 store 中的状态。
最后，我们需要连接组件，并使其订阅 store 的更新。通过 connect 函数，我们可以将组件连接到 store，以确保每当 state 发生变化时，它会自动刷新。
结论
Redux 是一种很有用的库，特别是在 React Native 项目中管理状态时，能够提供一个可靠而且可重复性的状态管理方案。通过这篇文章，您了解了 Redux 工作原理，并学习了 Redux 在 React Native 中的使用。
希望本篇文章对您有所帮助，也希望已经对 Redux 有一定的基础，可以自己编写更加高质量的代码。
示例代码：Redux-React-Native。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bd884d657e1f70dc143b6