Redux 是一个状态管理库，它提供了可预测的状态容器，使得应用程序状态的管理更加容易。Next.js 是一个基于 React 的服务端渲染框架，它提供了快速的页面加载和良好的开发体验。这两个工具可以很好地结合，以创建具有可扩展状态管理的高性能 Web 应用程序。
下面将介绍如何在 Next.js 应用中正确使用 Redux，包括 Redux 的初始化、action 和 reducer 的编写、以及如何使用 React 容器组件连接 Redux 状态。
1. 初始化 Redux
Redux 的初始化可以看作是创建一个存储对象的过程，Redux 使用 store 对象来储存状态。在 Next.js 应用中，我们可以将 store 作为顶层组件，并在 _app.js 中初始化它。首先，需要在应用中安装 Redux 和 react-redux，并创建一个 store。具体代码如下：
-- -------------------- ---- -------
-- -- ----- - -----------
--- ------- ----- -----------
-- -- -----
------ - ----------- - ---- -------
------ ----- ----------- - --
------ ----- ------- - ------- ------- -- -
------ ------------- -
--------
------ -----
-
-
------ ----- --------- - ------------- - --- -- -
------ -------------------- -------------
-在创建 store 后，我们需要创建 Provider 组件包裹整个应用，并将 store 作为 Provider 的 prop 传递给它。在 _app.js 中，引入 Provider 组件和 store，然后将 App 组件包裹在 Provider 中。具体代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ --- ---- ----------
------ - -------- - ---- -------------
------ - --------- - ---- ----------
----- ----- ------- --- -
------ ----- ----------------- ---------- --- -- -
----- --------- - -------------------------
- ----- ------------------------------
- --
------ - --------- -
-
-------- -
----- - ---------- --------- - - ----------
----- ----- - -------------
------ -
--------- --------------
---------- -------------- --
-----------
-
-
-
------ ------- -----2. 定义 Action 和 Reducer
在 Redux 中，action 用于描述如何更新状态，而 reducer 用于实际更新状态。在 Next.js 应用中，我们可以将 action 和 reducer 分别定义为纯函数，并将它们存储在单独的文件中以便于管理。
Action
action 是一个返回一个 action 对象的函数，其中 action 对象通常包含两个属性：type 和 payload。type 用于描述 action 的类型，payload 用于描述 action 的内容。具体代码如下：
-- -------------------- ---- ------- ------ ----- ----------- - - --------- ----------- ------------ ------------- - ------ -------- ------------- - ------ - ----- --------------------- -------- - ---- - - - ------ -------- -------------- - ------ - ----- ------------------------ -------- - -- - - -
Reducer
reducer 是一个接收当前状态和 action 对象的函数，它返回一个新的状态对象。在 reducer 中，我们可以使用 switch 语句来根据不同的 action 类型更新状态。具体代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
----- ------------ - --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ ---------- --------------------
---- ------------------------
------ ----------------- -- ------- --- ------------------
--------
------ -----
-
-
------ ------- -------3. 连接 Redux 和 React 组件
要让 React 组件连接 Redux 状态，我们可以使用 react-redux 提供的 connect 函数。connect 函数可以将组件连接到 Redux store，并以 props 的形式提供 store 中的状态和 action。
在连接组件之前，我们需要确定组件需要什么状态和 action，并创建一个 mapStateToProps 函数来将 store 的状态映射到组件的 props。具体代码如下：
-- -------------------- ---- -------
------ - ------- - ---- -------------
----- --------------- - ----- -- -
------ -
------ -----------
-
-
----- ----------- ------- --------------- -
---
-
------ ------- -------------------------------------然后，我们可以在组件中使用 props 中的状态和 action。一个完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------- ---------- - ---- ------------
----- --------------- - ----- -- -
------ -
------ -----------
-
-
----- ----------- ------- --------------- -
-------- -
----- - ------ -------- - - ----------
------ -
-----
----
--------------- -- -
--- --------------
-----------
------- ----------- -- ----------------------------------------------
-----
---
-----
------- ----------- -- ------------------ ----- ---- ----- -------- -------------
------
-
-
-
------ ------- -------------------------------------结语
在使用 Redux 和 Next.js 时，当前状态和 action 的管理将变得更加轻松和可扩展。结合使用这两个库，开发人员可以快速构建高性能的 Web 应用程序，并更容易地管理其状态。希望本文可以对您在使用 Redux 和 Next.js 进行开发时提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678272a6935627c90008cafa
