在前端开发中，为了便于管理和共享数据，很多项目都采用了状态管理库。其中，Redux 是非常流行的一个，它的设计思想简单、灵活，可以适用于各种规模的应用。
在使用 Next.js 开发应用时，我们也可以很方便地引入 Redux，来管理全局的状态。本文将介绍在 Next.js 中使用 Redux 的具体方法，希望能对前端开发的同学有所帮助。
下载依赖包
首先，我们需要下载必要的依赖包。在终端窗口中定位到项目根目录，并运行下面的命令：
npm install --save react-redux redux
其中，react-redux 是依赖于 redux 的，这里一并下载了。
创建 store
接下来，我们需要创建 store，这是存储和管理应用全局状态的地方。
在项目根目录中创建一个名为 store.js 的文件，并按照下面的方式编写代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- ------
----- ------------ - -
------ --
--
-- -- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
-- -- -----
----- ----- - ---------------------
------ ------- ------在上面的代码中，我们定义了一个初始状态 initialState 和一个 reducer 函数 reducer。Reducer 接收当前状态和一个 action，并返回一个新的状态。
INCREMENT和DECREMENT是两个 action 的类型，用于增加和减少计数器的值。- 在 reducer 函数中，我们根据不同的 action 类型，返回不同的新的状态。
最后，我们调用 createStore 函数来创建 store，并导出它。
定义 actions
在 Redux 中，我们可以通过 dispatch 发送一个 action 到 reducer，来改变 store 中的状态。同时，为了方便管理 action，我们可以定义它们的类型和生成 action 的函数。
在项目根目录中创建一个名为 actions.js 的文件，并编写下面的代码：
-- -------------------- ---- ------- ------ ----- --------- - ------------ ------ ----- --------- - ------------ ------ ----- --------- - -- -- -- ----- ---------- --- ------ ----- --------- - -- -- -- ----- ---------- ---
在上面的代码中，我们定义了两个 action 类型（即 INCREMENT 和 DECREMENT），并分别对应于增加和减少计数器的操作。同时，我们还定义了两个生成 action 的函数 increment 和 decrement。
使用 Provider 注入 store
接下来，我们需要在 Next.js 中使用 Provider 来将 store 提供给子组件。
在项目根目录中可以新建一个 _app.js 文件，代码如下：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ --- ---- -----------
------ ----- ---- ----------
----- ----- ------- --- -
-------- -
----- - ---------- --------- - - -----------
------ -
--------- --------------
---------- -------------- --
-----------
--
-
-
------ ------- ------在 _app.js 中，我们继承了 next/app，并通过 Provider 组件将 store 传递给子组件。
示例代码
有了这些基础，我们可以写一个简单的组件来演示如何在 Next.js 中使用 Redux。
在项目根目录中创建一个名为 Counter.js 的文件，并编写下面的代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- - -- ------ ---------- --------- -- -- -
-----
---------- ------------
------- -------------------------------
------- -------------------------------
------
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
----------
----------
--
------ ------- ------------------------ -----------------------------在上面的代码中，我们通过 connect 函数将 Counter 组件连接到了 store 上。该函数的第一个参数是 mapStateToProps，它把 store 中的 state 映射到组件的 props 中。第二个参数是 mapDispatchToProps，它把我们定义的 actions 映射到组件的 props 中。
最后，我们导出连接后的 Counter 组件。
页面中可以直接引入即可：
-- -------------------- ---- -------
------ ------- ---- ------------
----- --------- - -- -- -
-----
-------- --
------
--
------ ------- ----------总结
在本文中，我们介绍了在 Next.js 中使用 Redux 管理全局状态的方法。
首先，我们下载了必要的依赖包：react-redux 和 redux。然后，我们创建了一个 store，定义了初始状态和 reducer 函数。
接着，我们定义了 actions，包括它们的类型和生成 action 的函数。
最后，我们使用 Provider 注入了 store，并使用 connect 函数将 Counter 组件连接到了 store 上。
希望本文可以对大家理解 Redux 的使用方法、优劣以及合理运用具有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eaedb1f6b2d6eab35a5bc2