介绍
Redux 是一个用于 JavaScript 应用程序状态管理的库。Next.js 是一个 React 框架，提供了服务器渲染功能和路由系统。结合 Next.js 和 Redux 可以创建高度可扩展的 Web 应用程序。
这篇文章将介绍如何在 Next.js 应用程序中使用 Redux。将会涵盖 Redux 架构，如何使用 Next.js 自定义服务器，建立 Next.js 项目以及如何使用 Redux 创建一个应用程序。
Redux 架构
Redux 架构包括三个核心元素：
- Action： 描述应用程序状态的更改。
- Reducer： 响应不同类型的 Action 并更新应用程序状态。
- Store：将 Action 和 Reducer 通过一种中间件模式结合起来，并且维护了整个应用程序状态。
Next.js 自定义服务器
为了使用 Redux，必须设置自定义服务器以便在服务器上运行 Redux。下面是一个自定义 Next.js 服务器的示例：
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- ---- - ----------------
----- - ----------- - - -----------------
----- - -------- - - -----------------------
----- ------- - ----------------------
----- ------ - --------------------
----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------ - ------------------------
----- ---- - -----
--------------------- -- -
----- ------ - ----------
---------------------------
--------------- --------
--------------- ----- ---- -- -
------ ----------- -----
---
------------------- -- -- -
------------------- ------- -- ---- ----------
---
---在这个示例中，使用 Express 设置一个自定义服务器并将其设置为 Next.js 的默认路由器。然后，使用 Redux 的 createStore 来创建应用程序存储，并使用 react-redux 提供的 Provider 将应用程序存储注入应用程序。
建立 Next.js 项目
安装 Next.js 并建立一个新的项目：
npx create-next-app my-app cd my-app npm run dev
使用 Redux 创建应用程序
在 Next.js 中，可以将 Redux 与 React 组件配合使用。下面是一个示例，介绍如何在 Next.js 中使用 Redux：
在pages/_app.js文件中：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ------- ---- --------------
----- ----- - ---------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------在pages/index.js页面组件中：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ -------- --------- ------ -------------- -- -
------ -
-----
---------- ------------
------- -------------------------------------------
------
--
-
----- --------------- - -- ----- -- -- -- ----- ---
----- ------------------ - -------- -- --
--------------- -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ -----------------------------在这个示例中，使用 connect 函数将 React 组件与 Redux State 和 Action Creator 关联起来。然后，使用 createStore 函数创建了应用程序存储。
结论
在 Next.js 应用程序中使用 Redux 实际上很容易。虽然可能需要花费一些时间来了解 React、Redux 和 Next.js 的特定部分，但一旦你明白了如何使用它们，你就可以创建出具有高度可扩展性的 Web 应用程序。从这个简单的示例中开始，进一步探索适合自己项目的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67078386d91dce0dc86985cf