React 已经成为了前端开发的热门框架，而 Redux 是一个可预测的状态容器，可以用来管理 React 应用的状态。在构建较为复杂的应用时，使用 Redux 可以使代码更具可扩展性和可维护性。但是，如何在 Next.js 项目中使用 Redux 呢？本文将详细介绍使用 Redux 在 Next.js 项目中的实现方法，包括配置、使用以及示例代码。
准备工作
在使用 Redux 前，需要引入所需的包。首先，安装 Redux 和 react-redux 包：
npm install redux react-redux
同时，需安装 Next.js 官方提供的 "next-redux-wrapper" 包:
npm install next-redux-wrapper
接着，创建一个 Redux store，用于存储应用的状态。在 Redux 中，store 是所有数据的唯一来源。由于 Next.js 需要使用 SSR（服务器端渲染），因此我们需要在创建 store 时应用中间件，以处理 redux-thunk 和其他中间件。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ - ------------------- - ---- --------------------------
------ --------------- ---- -------------
------ ----------- ---- ------------
------ -------- ---------------------------- - --- -
------ ------------
------------
-------------
--------------------
--------------------------------
-
-
-在上面的代码中，我们创建了一个叫做 initializeStore 的函数，用于创建 Redux store。该函数将中间件 thunkMiddleware 应用到 store 中。composeWithDevTools 方法可以让我们使用浏览器的 Redux DevTools 最好的调试/增强工具，如果生产不需要可以去掉。
配置 store
根据 Next.js 的官方文档，我们需要使用 "next-redux-wrapper" 包将 Redux store 传递给各自的页面组件。由于 Next.js 是基于 SSR（服务器端渲染）的，需要对 store 进行服务端和客户端的注入。
首先，创建一个被服务端和客户端共享的文件 _app.js，在该文件中进行 store 的配置。这样，每次切换路由时，都可以自动获取最新的 store。
-- -------------------- ---- -------
------ - -------- - ---- -------------
------ - --------------- - ---- ----------
-- ---- --------- ---- -- --------- -------- -- --- -----------
-------- ------- ---------- ---------- ----- -- -
------ -
--------- --------------
---------- -------------- --
-----------
-
-
--------------------- - ----- ------------ -- -
----- ----- - ----------------- -- ------ - --- ----- --- ---- -------
-------------------- - ----- -- ------ --- ----- -- --- ------- ------
----- -------- - ----- -------------------------------
------ - ------------ ----- - -- ------ --- --- ----- --- ------
-
------ ------- -----在上面的代码中，我们创建了 _app.js 文件，该文件将服务端和客户端代码组合在一起。同时，使用 Provider 将 store 绑定到 React 组件的 props 上，使得所有 React 组件默认拥有读写状态的权限。
同时，getInitialProps 方法是一个 Next.js 的生命周期方法，用于在服务端或客户端进行渲染前获取数据。我们可以在该方法中将 store 注入到 context 对象中，这样每次请求时，我们都可以使用 context 对象中的 store 属性了。
使用 Redux
现在，Redux store 已经在 Next.js 项目中配置好了，我们接下来介绍如何在组件中使用 Redux。
mapStateToProps 函数
首先，你需要编写一个在组件中使用 Redux state 的 mapStateToProps 函数。通过该函数绑定 redux state 到组件。
-- -------------------- ---- -------
------ - ------- - ---- -------------
-------- ------------------ -
------ -
----------------------------------------
-
-
----- --------------- - ------- -- -
------ -
---------------------- ------------------------------
-
-
------ ------- -------------------------------------上面的代码中，我们创建了一个组件 MyComponent，它绑定了 Redux 中的 somePropertyFromRedux 属性到组件的 props 上。connect 方法用于将 mapStateToProps 函数绑定到组件中，以使组件可以访问 Redux 的 state。
mapDispatchToProps 函数
接下来，我们希望在组件中实现一个函数，用于更改 Redux store 中的 state。使用 mapDispatchToProps 方法可以将 Redux 的 Dispatch 方法绑定到 React 组件的 props 上。
-- -------------------- ---- -------
------ - ------- - ---- -------------
-------- ------------------ -
------ -
------- ------------------------------------- ----- --------------
-
-
----- ------------------ - ---------- -- -
------ -
--------------- -- -- -
---------- ----- -------------- -------- ---- ------ --
-
-
-
------ ------- ------------- --------------------------------以上示例中，我们创建了一个函数 onClickHandler，通过 dispatch 方法向 Redux store 中分发一个 action。onClickHandler 函数绑定到组件中的 props 上，以便在组件中调用。
示例代码
上面的步骤说明了在 Next.js 项目中使用 Redux 的全部过程，下面给出一份完整的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ - --------- ------- - ---- -------------
------ - ------------------- - ---- --------------------------
------ --------------- ---- -------------
------ ----------- ---- ------------
------ -------- ---------------------------- - --- -
------ ------------
------------
-------------
--------------------
--------------------------------
-
-
-
-------- ------------------ -
------ -
-----
---------- ---- ----- ------ --------------------
------- --------------------------------------- --------------
------
-
-
----- --------------- - ------- -- -
------ -
------- ------------
-
-
----- ------------------ - ---------- -- -
------ -
--------------- -- -- -
---------- ----- ---------------- --
-
-
-
----- -------------------- - ------------------------ --------------------------------
-------- ------- ---------- ---------- ----- -- -
------ -
--------- --------------
--------------------- --
-----------
-
-
--------------------- - ----- ------------ -- -
----- ----- - -----------------
-------------------- - -----
----- -------- - ----- -------------------------------
------ - ----------- -
-
------ ------- -----在上述代码中，我们创建了一个简单的组件 MyComponent 用于修改和显示 Redux store 中的计数器状态。可以在 mapStateToProps 和 mapDispatchToProps 中绑定存储到 props 中的属性和方法。initializeStore 用于初始化和创建一个新的 Redux store，同时在 MyApp 组件中注入 store，完整示例代码即可使用。
总结
本文介绍了如何在 Next.js 项目中使用 Redux，包括创建和配置 store、使用 Redux 中的 state 和 Dispatch 方法、示例代码。希望读者通过本文能够更好的理解和使用 Redux，为之后的开发做好铺垫。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ce10095b1f8cacd4627de