Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它允许您更轻松地管理应用程序的状态并跟踪它的变化。在本文中，我们将讨论如何使用 Redux 创建一个 Github 搜索应用程序。
前置知识
在阅读本文之前，您需要了解以下概念：
- React 组件
- Redux store
- Redux reducers
- Redux actions
如果您还不熟悉以上概念，请先阅读相关文档。
创建一个 Redux store
我们首先需要创建一个 Redux store，它将存储我们应用程序的状态。在这个例子中，我们的状态将包括以下字段：
searchTerm：用户输入的搜索词searchResults：Github 的搜索结果
我们使用 Redux 的 createStore 方法创建一个 store，并将一个 reducer 传递给它。该 reducer 将负责处理所有的 action 并更新 store 中的状态。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
----------- ---
-------------- --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------------
------ -
---------
----------- --------------
--
---- ---------------------
------ -
---------
-------------- --------------
--
--------
------ ------
-
-
----- ----- - ---------------------上面的代码创建了一个名为 store 的 Redux store，并将其初始化为 initialState 对象。我们还定义了一个名为 reducer 的函数，它将根据传入的 action 更新 store 中的状态。在这个例子中，我们定义了两个 action 类型：SET_SEARCH_TERM 和 SET_SEARCH_RESULTS。
创建一个搜索组件
接下来，我们创建一个搜索组件，它将包含一个输入框和一个按钮，用户可以在其中输入要搜索的 Github 用户名或项目名称。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------
-------- -------- -
----- ------------ -------------- - -------------
----- -------- - --------------
----- ------------ - ------- -- -
-----------------------
---------- ----- ------------------ -------- ---------- ---
-- ----- -- ------ --- ----- -------------
--
------ -
----- ------------------------
------
-----------
------------------
----------------- -- ----------------------------------
--
------- -------------------------
-------
--
-上面的代码中，我们使用了 React 的 useState hook 来管理输入框的值。当用户输入搜索词时，我们将其存储在 searchTerm 状态中。当用户点击搜索按钮时，我们将 searchTerm 发送给 store，以便在后续的 API 请求中使用。
发起 Github API 请求
现在，我们需要发起一个 API 请求，以获取与用户输入的搜索词匹配的 Github 用户或项目。我们使用 Github 的 REST API v3 进行搜索，并将结果存储在 store 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------------- -
----- ---------- - ------------------- -- ------------------
----- ------------- - ------------------- -- ---------------------
----- -------- - --------------
------------ -- -
----- ------------ - ----- -- -- -
----- -------- - ----- ------------------------------------------------------------------------
---------- ----- --------------------- -------- ------------------- ---
--
-- ------------ -
---------------
-
-- ------------ -----------
------ -
----
--------------------------- -- -
--- ----------------------------------
---
-----
--
-上面的代码中，我们使用了 React 的 useEffect hook 来发起 API 请求。当 searchTerm 发生变化时，我们将发起一个 GET 请求，以获取与搜索词匹配的 Github 用户或项目。一旦我们收到 API 响应，我们将结果存储在 store 中，以便在后续的渲染中使用。
总结
在本文中，我们介绍了如何使用 Redux 创建一个 Github 搜索应用程序。我们了解了如何创建一个 Redux store、如何定义 reducer 和 actions，以及如何使用 React 组件与 Redux store 交互。我们还介绍了如何使用 Github 的 REST API v3 发起搜索请求，并将结果存储在 Redux store 中。通过学习本文，您应该能够更好地理解 Redux 和 React 在应用程序状态管理方面的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656a9b3fd2f5e1655d30398f