React-Native(4) redux 实例
在本篇文章中，我们将使用 React-Native 和 Redux 技术，建立一个基于异步数据请求的实例。我们将会学习 Redux 的工作原理，如何使用 React-Native 和 Redux 来提高应用的性能和可维护性。我们会详细解释 Redux 的核心思想和概念，以帮助读者更好地理解这个实例。
什么是 Redux?
Redux 是一个 JavaScript 应用程序状态容器，它被设计用来处理应用程序的状态。它是构建一致的、可预测的应用程序的理想选择，因为所有状态都在一个位置进行管理。Redux 可以与 React 或其他视图库一起使用。
Redux 的核心思想是应用程序的状态是可预测的。 在 Redux 应用程序中，所有操作都是类似于数据库事务的纯 JavaScript 函数。这些函数被称为「reducers」，它们接收一个状态对象和一个动作对象，然后返回一个新的状态对象。
实现一个应用程序的状态
在我们的例子中，我们将要构建一个简单的商品搜索应用程序。当用户搜索关键字时，我们将会使用异步网络请求从后端 API 获取数据，并以列表的形式呈现在用户的屏幕上。用户还可以在列表中选择特定的商品，以便了解更多有关商品的信息。我们将使用 Redux 来管理应用程序的状态。
在 Redux 中，状态由一个 JavaScript 对象表示。这个对象通常称为「存储」或「状态树」。这个状态树保存着整个应用程序的状态。
第一步是创建一个初始状态。初始状态包括用户选择的商品、列表中显示的商品、上次搜索使用的关键字、以及加载状态。
-- --------------------- ------ ------- - ---------------- ----- ------------ --- -------- --- ---------- ------ --
我们的存储状态是一个 JavaScript 对象，其中包含键值对。我们将使用这些键值对来保存我们所需的各种数据。
我们还需要定义一些操作来更新这些数据。 在 Redux 中，操作由一个纯 JavaScript 对象表示。 在这个对象中，必须包含一个类型字段表示操作类型，例如 ‘SEARCH_PRODUCTS_SUCCESS’ 或 ‘LOADING_PRODUCTS’。 我们还可以使用 payload 字段来传递有关操作的其他任何信息。
-- ------------------------------ ------ ----- ----------------------- - -------------------------- ------ ----- ----------------------- - -------------------------- ------ ----- --------------------- - ------------------------ ------ ----- -------------- - -----------------
当我们的应用程序发生某些操作时，Redux 将会根据定义的 Reducer 函数执行操作。
-- ---------------------------------
------ -
------------------------
------------------------
----------------------
---------------
- ---- ---------------------------
----- ------------ - -
---------------- -----
------------ ---
-------- ---
---------- ------
--
------ ------- ------ - ------------- ------- -- -
----- - ----- ------- - - -------
------ ------ -
---- ------------------------
------ -
---------
---------- -----
--
---- ------------------------
------ -
---------
------------ -----------------
---------- ------
--
---- ----------------------
------ -
---------
------------ ---
---------- ------
--
---- ---------------
------ -
---------
---------------- --------
--
--------
------ ------
-
-这个函数接收一个旧状态，并使用一个操作来创建一个新状态。
实现异步操作和使用 Redux-Thunk
在我们的应用程序中，我们需要发出异步请求，获取商品数据。 在 JavaScript 中，我们可以使用 XMLHttpRequest 或 Fetch API 来执行异步网络请求。在本例中，我们使用 Fetch API 进行异步数据请求。
这是一个使用 Fetch API 获取商品列表的简单操作。
-- --------------------------------
------ -
------------------------
------------------------
----------------------
- ---- ---------------------------
------ ----- -------------- - --------- -- -
------ ----- ---------- -- -
---------- ----- ----------------------- ---
--- -
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ----------------
----------
----- ------------------------
-------- -
--------- --------------
--
---
- ----- ------- -
---------- ----- --------------------- ---
-
--
--该操作从我们的 API 获取商品，并根据 API 的响应更新我们的应用程序状态。在这个例子中，我们请求搜索结果，并将结果存储在我们的存储状态中。我们还设置 isLoading 标志来指示我们是否正在加载数据。 我们可以将这个操作分派到 Redux Store 上，并且我们可以在任何位置监听 Store 响应状态的变化。
为了处理异步操作，我们使用了 Redux-Thunk 中间件。 Redux-Thunk 允许 action creators 返回一个函数，而不是一个 action 对象。这个函数将被调用，带有 dispatch 和 getState 两个参数，并可以被用来执行异步操作。
使用 Connect 函数链接 React-Native Components 和 Redux Store
我们需要将我们的 React 组件与 Redux Store 相连接，以便可以获取状态并派发操作。
我们可以使用 connect 函数将 React 组件与 Redux Store 相连接。
-- --------------------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- ----- ------ - ---- ---------------
------ - -------------- - ---- -----------------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
-------- --------------
--
-
-------- - -- -- -
----- - ------- - - -----------
-----------------------------------
--
-------- -
------ -
------
---------------------
----------
-------------------- -- --------------- -------- ---- ---
--------------------------
--
------- -------------- ----------------------- --
--------------------- -- ------------------ ---
-------
--
-
-
----- --------------- - ------- -- -
------ -
-------- --------------
---------- ----------------
--
--
----- ------------------ - -
---------------
--
------ ------- ------------------------ ----------------------------在这个例子中，我们将 Search 标记为一个 connect 的组件，并指定一些配置。 在 mapStateToProps 函数中，我们从 Store 获取关键字和 isLoading 属性，并将它们作为组件的属性。 mapDispatchToProps 对象是将那些操作与组件相连。
结论
在本文中，我们通过一个基于 React-Native 的例子，详细讲解了 Redux 的基本思想和概念。我们学习了如何使用 Redux 来管理应用程序的状态，以及如何使用 Redux-Thunk 来支持异步操作。我们还学习了 connect 函数，并演示了如何使用它来将组件与 Redux 存储相连接。我们希望这篇文章能帮助读者更好地理解 Redux 技术，并在日常的开发中合理地使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f84145f55128102650596