React Native 是一个非常流行的跨平台开发框架，如何在 React Native 中使用 Redux，是每个前端开发者都需要掌握的知识。
Redux 是一个状态管理库，可以帮助我们管理应用的状态。在 React Native 中使用 Redux，可以更好的组织应用架构，并且方便跨组件状态共享，提高应用的可维护性。
安装 Redux 和 React-Redux
我们需要先安装 Redux 和 React-Redux 两个库。
--- ------- ------ ----- -----------
创建 Store
在 Redux 中，应用的状态被存储在一个称为 Store 的对象中。我们需要创建一个 Store，来管理整个应用的状态。
------ - ----------- - ---- -------- ----- ------------ - --- ----- ------- - ------ - ------------- ------- -- - -- -- ------ ----- ----- -- ----- ----- - ---------------------
上述代码中，我们定义了一个名为 reducer 的纯函数，接收旧的 state 和一个 action 参数，经过处理后返回新的 state。我们使用 createStore 方法创建一个 Store，并传入 reducer 函数。
提供 Store
为了让应用中的组件可以访问到 Store，我们需要通过 Provider 组件将 Store 提供给组件。
------ - -------- - ---- --------------
------ --- ---- ----------------
----- ---- - -- -- -
--------- --------------
---- --
-----------
--
------ ------- -----使用 Connect 高阶组件连接组件和 Store
在 React Native 中，我们可以使用 connect 高阶组件将组件和 Store 连接起来。connect 接收两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps函数接收整个 Store 的 state，返回一个包含数据的对象，这些数据将传递给组件的 props。mapDispatchToProps函数接收一个 dispatch 函数，返回一个包含 dispatch 的函数集的对象，这些函数将也将传递给组件的 props。
------ - ------- - ---- --------------
----- --------- - -- ----- ------- -- -- -
------
-------------------
------- ----------------------- -----------
-------
--
----- --------------- - ----- -- --
----- -----------
---
----- ------------------ - -------- -- --
-------- -- -- ---------- ----- ------- ---
---
------ ------- ------------------------ -------------------------------上述代码中，我们使用 connect 高阶组件将 mapStateToProps 和 mapDispatchToProps 函数连接到 Component 组件上，并返回一个新的组件。
示例代码
下面是一个完整的示例代码，其中包括了创建 Store、提供 Store、连接组件和 Store 的完整配置。
index.js
------ ----- ---- --------
------ - ----------- - ---- ---------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ------- ---- ------------
----- ------------ - ---
----- ----- - ---------------------
----- ---- - -- -- -
--------- --------------
---- --
-----------
--
------------------------------------ -- -- ------App.js
------ ----- ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - ------- - ---- --------------
----- --------- - -- ----- ------- -- -- -
------
-------------------
------- ----------------------- -----------
-------
--
----- --------------- - ----- -- --
----- -----------
---
----- ------------------ - -------- -- --
-------- -- -- ---------- ----- ------- ---
---
------ ------- ------------------------ -------------------------------reducer.js
----- ------------ - -
----- ------ -------
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------- -
------ -
---------
----- ------ -------
--
-
-------- -
------ ------
-
-
--
------ ------- --------总结
整个过程中，我们先是创建了一个 Store，并定义了一个 reducer 函数来处理 action 并返回 new state。然后，我们使用 Provider 组件来提供 Store，并使用 connect 高阶组件连接组件和 Store。
使用 Redux 需要一定的学习成本，但是 Redux 可以帮助我们更好的组织应用结构，能够方便跨组件状态共享，提高应用的可维护性。如果你使用 React Native 进行开发，那么 Redux 是你的必备技能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6487c41e48841e9894651e03