React Native 是一款广泛应用于移动端开发的 JavaScript 框架。它可以帮助开发者们快速地构建出各种 iOS 和 Android App，并且能够让你像写网页一样写 App。而 Redux 又是一个非常流行的状态管理工具，它能够帮助我们管理全局状态，让数据流动变得更加清晰明了。
本文将会带领读者们学习如何在 React Native 中应用 Redux，同时将提供详细的步骤和实例代码参考。
第一步：安装依赖包
首先，我们需要使用 npm 安装我们所需要的依赖包。打开终端，通过以下命令进行安装：
npm install react-redux redux --save npm install -D @babel/core @babel/runtime @react-native-community/eslint-config @types/react @types/react-dom @types/react-native @types/redux @types/react-redux babel-jest babel-plugin-syntax-jsx babel-preset-flow jest metro-react-native-babel-preset react-dom react-test-renderer ts-jest typescript
第二步：创建 Redux Store
首先，我们需要在应用程序中创建一个存储状态的空间，也就是 Redux 的 Store，因此我们需要在项目中先创建一个 store.js 文件：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;在这里，我们先调用 createStore 方法，然后将项目的 rootReducer 作为参数传递给这个 createStore 方法。这样我们就成功的创建出了我们的 Redux Store。
同时，我们在项目中还需要为我们的应用程序添加 Provider，这个 Provider 将会允许所有的子组件访问我们的 Redux Store。因此，我们需要在 index.js 文件中引入 Provider 并将其包裹在根节点的组件上。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----- ---- - -- -- -
--------- --------------
---- --
-----------
--
------ ------- -----第三步：创建 Actions 和 Reducers
接下来，我们需要定义一些 action 和 reducers，这样我们才能加以利用 Redux 在我们的组件之间传递全局状态。在相应的目录下创建一个 action.js 和 reducer.js 文件。
在 action.js 文件中，我们需要导出一些 actionCreator 函数，这些函数用于创建不同的 actions。
export const increaseCount = () => ({
type: 'INCREASE_COUNT',
});
export const decreaseCount = () => ({
type: 'DECREASE_COUNT',
});在 reducer.js 文件中，我们需要重新组合我们的 state 和 action，并且根据不同的 action 进行状态的更新。
-- -------------------- ---- -------
----- ------------ - -
------ --
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
------ ----------- - --
--
---- -----------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
------ ------- ------------在这里，我们定义了一个默认的状态，然后根据不同的 actions 对状态进行更新。
第四步：在组件中使用 Redux
现在，我们已经成功地创建了我们的 actions 和 reducers，接下来我们需要使用它们在我们的组件中进行状态的管理。
在这里，我们先定义一个 Counter 组件，这个组件将使用 Redux 管理状态，并将状态映射到组件的 props 上。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - -------------- ------------- - ---- -------------
----- ------- - -- ------ -------------- ------------- -- -- -
-----
---------- ------------
------- ----------------------------------
------- ----------------------------------
------
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
--------------
--------------
--
----------------- - -
------ -----------------
-------------- ---------------
-------------- ---------------
--
------ ------- ------------------------ -----------------------------在这里，我们使用了 connect 方法来将 Redux Store 中的状态转换成我们组件的属性，并绑定了相应的 actionCreator 函数。
通过这样的方式，我们就可以在组件中随时的读取状态，同时也可以在组件中触发各种改变状态的操作。
结论
通过本文的学习，我们成功的学习如何在 React Native 应用中使用 Redux 进行状态管理。在这个过程中，我们学习了如何创建相应的 actions、reducers 和 store，并且在组件中使用它们来管理全局状态。
在实际的项目中，我们可以基于这个基础，继续扩展状态的管理和更多的业务逻辑，编写出更加完整的 React Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675184838bd460d3ad8a5d6c