前言
Redux 是一个流行的状态管理工具，被广泛应用于 React 生态系统中。在 Next.js 中使用 Redux，可以使我们更方便地管理我们的应用程序的状态，并且可以帮助我们使我们的应用程序更易于维护和扩展。
在本文中，我们将讨论如何在 Next.js 中使用 Redux 的解决方案。
安装 Redux
首先，我们需要安装 Redux。在我们的项目根目录下，运行以下命令：
npm install redux react-redux
这将安装 Redux 和 React-Redux 两个必要的包。
创建 Redux Store
我们需要创建一个 Redux store。如下所示，我们可以在 pages/_app.js 中创建 store。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ---------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------在此示例中，我们首先定义了一个名为 initialState 的对象，该对象包含了我们应用程序的初始状态。然后，我们创建了一个名为 reducer 的函数，该函数将接收先前状态和一个操作类型，并更新状态。最后，我们通过使用 createStore 函数创建了 Redux store。
将状态映射到组件中
现在我们已经创建了 Redux store，我们需要将其与我们的组件进行绑定。在我们的组件中，我们需要使用 connect 函数将状态映射到组件的属性中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- --------- ------ -------- -- -
------ -
-----
--------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ----------------------------------在上述示例中，我们首先使用 connect 函数将 Counter 组件与 Redux store 进行绑定。其次，我们定义了一个名为 mapStateToProps 的函数，该函数将接收 Redux store 中的状态，并将其映射到 Counter 组件中的 count 属性中。
在这个例子中，我们创建了一个简单的计数器，在 render 方法中显示计数器的当前值，并为 + 和 - 按钮绑定了 dispatch 函数。每当用户单击这些按钮时，我们会向 Redux store 发送命令。
异步操作
许多应用程序需要进行异步操作，例如通过网络请求数据。为了支持这样的操作，我们需要在我们的项目中使用 redux-thunk 或类似的中间件。
安装 redux-thunk：
npm install redux-thunk
在 store.js 中导入 applyMiddleware 和 thunk：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));现在我们已经包装了我们的 Store，以便可以支持异步操作，我们就可以为 increment 和 decrement 创建异步操作：
-- -------------------- ---- -------
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-在上述示例中，我们使用了 redux-thunk 中间件，并定义了两个异步操作：incrementAsync 和 decrementAsync。每个异步操作都是一个返回函数的函数。该返回函数带有一个名为 dispatch 的参数，该参数用于向 Redux store 发送命令。
现在我们已经定义了异步操作，我们可以使用它们来更新 store。
示例代码
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - -------------------- ------------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------
-- --------------
------ - ------- - ---- --------------
-------- --------- ------ -------- -- -
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-
------ -
-----
--------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ----------------------------- --------------
------- ----------- -- ----------------------------- --------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ----------------------------------总结
在本文中，我们介绍了如何在 Next.js 中使用 Redux 的解决方案。我们首先安装了 Redux 和 React-Redux 包，并创建了 Redux store。之后，我们学习了如何连接我们的组件和 Redux store，并执行异步操作。最后，我们提供了一个代码示例，展示了如何在 Next.js 中使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d09597d4982a6eb6646d2