在前端开发中，Redux 是一种流行的状态管理库，用于管理应用程序的状态并促进组件之间的通信。而 Next.js 是一种流行的 React 框架，它提供了服务器渲染和静态导出等功能，使得构建高性能、可扩展的 React 应用程序变得更加容易。在本文中，我们将探讨如何在 Next.js 应用程序中集成 Redux，以便更好地管理应用程序的状态。
安装和配置 Redux
首先，我们需要安装 Redux 及其相关依赖项。可以使用以下命令在项目中安装它们：
--- ------- ----- ----------- -----------
接下来，我们需要创建一个 Redux store。在 Next.js 中，我们可以在 _app.js 文件中创建一个高阶组件来封装整个应用程序，并在其中创建 Redux store。
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- --------------
----- ----- - ------------------------ ------------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------在上面的代码中，我们首先导入了 Provider、createStore 和 applyMiddleware，以及我们的根 reducer。然后，我们使用 createStore 和 applyMiddleware 创建了一个 Redux store，并使用 Provider 将其传递给整个应用程序。最后，我们将 store 作为 Provider 组件的 props 传递给 Component 和 pageProps。
创建 Redux action 和 reducer
接下来，我们需要创建 Redux action 和 reducer。在 Next.js 中，我们可以将它们放在 redux 目录下。
Action
Redux action 是一个对象，它描述了发生的事件以及应用程序状态的更改。在我们的示例中，我们将创建一个 fetchPosts action，它将从 API 中获取数据并将其存储在 Redux store 中。
------ ----- ---- --------
------ ----- ------------------- - ----------------------
------ ----- ------------------- - ----------------------
------ ----- ------------------- - ----------------------
------ ----- ----------------- - -- -- -
------ -
----- --------------------
--
--
------ ----- ----------------- - ------- -- -
------ -
----- --------------------
-------- ------
--
--
------ ----- ----------------- - ------- -- -
------ -
----- --------------------
-------- ------
--
--
------ ----- ---------- - -- -- -
------ ---------- -- -
------------------------------
-----
--------------------------------------------------
---------------- -- -
----- ----- - --------------
-----------------------------------
--
-------------- -- -
----- -------- - --------------
--------------------------------------
---
--
--在上面的代码中，我们首先导入了 axios，以便从 API 中获取数据。然后，我们定义了三个常量 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS 和 FETCH_POSTS_FAILURE，它们分别表示请求数据、成功获取数据和获取数据失败。
接下来，我们定义了三个 action creator fetchPostsRequest、fetchPostsSuccess 和 fetchPostsFailure，它们分别返回一个包含 type 和 payload 属性的对象。
最后，我们定义了一个 fetchPosts 异步 action creator，它将使用 axios 从 API 中获取数据，并使用 dispatch 将结果传递给 fetchPostsSuccess 或 fetchPostsFailure。
Reducer
Redux reducer 是一个纯函数，它接受先前的状态和 action，然后返回一个新的状态。在我们的示例中，我们将创建一个 postsReducer，它将管理应用程序中的帖子列表。
------ -
--------------------
--------------------
--------------------
- ---- -------------
----- ------------ - -
-------- ------
------ ---
------ ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- -----
--
---- --------------------
------ -
-------- ------
------ ---------------
------ ---
--
---- --------------------
------ -
-------- ------
------ ---
------ ---------------
--
--------
------ ------
-
--
------ ------- -------------在上面的代码中，我们首先定义了初始状态 initialState，它包含了 loading、posts 和 error 三个属性。然后，我们定义了 postsReducer，它接受先前的状态和 action，并根据 action 的类型返回新的状态。
在组件中使用 Redux
现在，我们已经创建了 Redux store、action 和 reducer，接下来我们将在组件中使用它们。在我们的示例中，我们将创建一个 Posts 组件，它将显示从 API 中获取的帖子列表。
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------
-------- ------- --------- -------- ------ ----- -- -
------------ -- -
-----------------------
-- ----
-- --------- -
------ --------------------
-
-- ------- -
------ -----------------
-
------ -
-----
--------------
----
----------------- -- -
--- -------------------------------
---
-----
------
--
-
----- --------------- - ------- -- -
------ -
-------- --------------
------ ------------
------ ------------
--
--
------ ------- --------------------------------在上面的代码中，我们首先导入了 useEffect 和 connect，以及 fetchPosts action creator。然后，我们定义了一个 Posts 组件，它接受 dispatch、loading、posts 和 error 四个属性。
在 useEffect 中，我们调用 fetchPosts action creator 来获取帖子列表。如果 loading 为 true，则显示 "Loading..."；如果 error 不为空，则显示错误消息；否则，我们将帖子列表渲染为一个无序列表。
最后，我们使用 connect 将 Posts 组件连接到 Redux store，并将 loading、posts 和 error 作为 props 传递给它。
总结
在本文中，我们学习了如何在 Next.js 应用程序中集成 Redux。我们首先安装和配置了 Redux，然后创建了 Redux action 和 reducer。最后，我们在组件中使用了 Redux store 和 action，以便更好地管理应用程序的状态。希望本文能够帮助你更好地理解如何使用 Redux 和 Next.js 来构建高性能、可扩展的 React 应用程序。
完整示例代码见：https://github.com/NextLearning/next-redux-example。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f95cd3d10417a222526159