本文将介绍如何使用 Redux Toolkit 管理 Next.js 应用程序中的状态。Redux Toolkit 是一个官方推荐的 Redux 工具包，它提供了简化 Redux 开发的工具和最佳实践，减少了 Redux 开发的样板代码。
什么是 Redux Toolkit？
Redux Toolkit 是一个官方推荐的 Redux 工具包，它是对 Redux 的最佳实践和常见用例的封装。它包含了一些常用的 Redux 工具和库，如 immer、Redux Thunk 和 Redux DevTools Extension。
Redux Toolkit 的目标是简化 Redux 开发，减少样板代码，并提高开发效率。它提供了一些简单易用的 API，如 createSlice、createAsyncThunk 和 createEntityAdapter，使开发者可以更快地编写 Redux 代码。
如何使用 Redux Toolkit？
下面将介绍如何使用 Redux Toolkit 管理 Next.js 应用程序中的状态。
安装 Redux Toolkit
首先，需要安装 Redux Toolkit：
npm install @reduxjs/toolkit
创建 Redux store
在 Next.js 应用程序中，可以在 _app.js 文件中创建 Redux store。首先，需要导入 configureStore 函数和 createWrapper 函数：
import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';然后，可以创建 Redux store：
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
--------
------ ------
-
--
----- --------- - -- -- ---------------- ------- ---
------ ----- ------- - -------------------------在上面的代码中，reducer 是一个简单的 reducer，它只是返回当前的状态。makeStore 函数返回一个配置好的 Redux store，它使用了上面定义的 reducer。
最后，使用 createWrapper 函数创建一个包装了 Redux store 的 Next.js 应用程序：
export const wrapper = createWrapper(makeStore);
创建 Redux slice
在 Redux Toolkit 中，可以使用 createSlice 函数创建一个 slice，它包含了一个 reducer 和一些 action creators。
首先，需要导入 createSlice 函数：
import { createSlice } from '@reduxjs/toolkit';然后，可以创建一个 slice：
-- -------------------- ---- -------
----- ------------ - -------------
----- ----------
------------- - ------ - --
--------- -
---------- ------- -- -
----------- -- --
--
---------- ------- -- -
----------- -- --
--
--
---在上面的代码中，counterSlice 是一个 slice，它包含了一个名为 counter 的 reducer 和两个 action creators：increment 和 decrement。
使用 Redux slice
在 Next.js 应用程序中，可以使用 wrapper 对象的 withRedux 方法将 Redux store 注入到组件中。然后，可以使用 useSelector 和 useDispatch hooks 访问 Redux store 中的状态和 action creators。
首先，需要导入 withRedux 方法、useSelector hook 和 useDispatch hook：
import { withRedux } from 'next-redux-wrapper';
import { useSelector, useDispatch } from 'react-redux';然后，在组件中使用 useSelector 和 useDispatch hooks：
-- -------------------- ---- -------
----- ------- - -- -- -
----- ----- - ------------------- -- ---------------------
----- -------- - --------------
------ -
-----
---------- ------------
------- ----------- -- ------------------------------------------------------
------- ----------- -- ------------------------------------------------------
------
--
--
------ ------- -------------------在上面的代码中，Counter 组件使用 useSelector hook 获取 Redux store 中的 counter 状态，并使用 useDispatch hook 发送 increment 和 decrement action。
总结
本文介绍了如何使用 Redux Toolkit 管理 Next.js 应用程序中的状态。首先，需要安装 Redux Toolkit，并在 _app.js 文件中创建 Redux store。然后，可以使用 createSlice 函数创建一个 slice，它包含了一个 reducer 和一些 action creators。最后，在组件中使用 useSelector 和 useDispatch hooks 访问 Redux store 中的状态和 action creators。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65820115d2f5e1655dd365be