为了更好地管理应用程序中的状态，许多开发人员转向 Redux。Redux 是一种流行的 JavaScript 库，它可以与各种框架和库集成。在这里，我们将讨论如何将 Redux 结合 Next.js 使用。
安装 Redux 和相关依赖
在开始之前，需要安装一些依赖项：
npm install --save redux react-redux next-redux-wrapper
这些依赖项的作用如下：
redux：Redux 库react-redux：Redux 库的 React 绑定next-redux-wrapper：这个库是一个简单的 Next.js 服务器端渲染解决方案
创建 Redux Store
首先，我们需要创建一个 Redux store，该 store 将在整个应用程序中用于存储状态。我们可以将其放在一个单独的文件中，例如 store.js：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ----- --------- - ------------- - - ------ - -- -- -
------ -------------------- --------------
--上述代码是非常简单的 Redux store，每次执行相应的 action 后，状态 count 都会相应地增加或减少。
创建 _app.js
接下来，我们需要为我们的 Next.js 应用程序创建一个 _app.js 文件。_app.js 是 Next.js 中的特殊文件，它是所有页面的公共父级组件。它可以用于在所有页面间共享状态和逻辑。
首先，在项目根目录下创建一个名为 _app.js 的文件并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - --------- - ---- -----------
------ ----------------
----- ----- - -- ---------- --------- -- -- -
----- ----- - ------------
------ -
--------- --------------
---------- -------------- --
-----------
--
--
------ ------- ------在这个文件中，我们首先引入 React 库、Provider 组件和 makeStore 函数。然后，我们定义了一个名为 MyApp 的函数组件，该组件接收 Component 和 pageProps 作为 props。最后，我们将 Provider 组件封装在 MyApp 之外，这样所有的子组件都可以访问到 Redux store。
创建页面
现在，我们可以创建一个新页面来测试 Redux store。在我们的项目中，创建一个名为 index.js 的新页面，并包含以下代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ---- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
------ ------- ------------------------ --------------------------在上述代码中，我们首先引入 connect 函数、mapStateToProps 和 mapDispatchToProps 函数。然后，我们定义了一个函数组件 Home，该组件显示当前状态中的 count 值，并包含两个按钮：分别触发 increment 和 decrement 函数。这些函数会分别分派相应的 action，该 action 会更新状态值。
最后，我们使用 connect 函数将 Home 组件连接到 Redux store，使其可以访问 count 和 increment/decrement 函数。
运行应用程序
现在，我们已经完成了所有的代码，我们可以启动应用程序来查看状态管理是否正常。在终端中运行以下命令启动 Next.js 应用程序：
npm run dev
然后，打开您的浏览器并访问 http://localhost:3000/，即可看到渲染后的页面。每次单击 Increment 或 Decrement 按钮时，页面上的 Count 数字都将更新。
结论
在本文中，我们学习了如何在 Next.js 中使用 Redux 进行状态管理。Redux 可以帮助我们更好地组织和管理应用程序中的状态。通过创建 Redux store 和使用 connect 函数，我们可以轻松地将 Redux 集成到我们的 Next.js 应用程序中。
示例代码：
store.js
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ----- --------- - ------------- - - ------ - -- -- -
------ -------------------- --------------
--_app.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - --------- - ---- -----------
------ ----------------
----- ----- - -- ---------- --------- -- -- -
----- ----- - ------------
------ -
--------- --------------
---------- -------------- --
-----------
--
--
------ ------- ------index.js
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ---- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
------ ------- ------------------------ --------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675296708bd460d3ad95e833