在前端开发中，React 和 Redux 是两个非常流行的框架。React 是一个用于构建用户界面的 JavaScript 库，而 Redux 是一个用于管理应用程序状态的 JavaScript 库。在 Next.js 中，我们可以使用 react-redux 来管理我们的应用程序状态。
在本文中，我们将介绍 Next.js 中 react-redux 的最佳实践。我们将探讨如何在 Next.js 中使用 react-redux，如何组织我们的代码，如何使用中间件和如何测试我们的代码。
安装和配置
首先，我们需要安装 react-redux 和 redux。我们可以使用 npm 或 yarn 进行安装：
npm install react-redux redux
或者
yarn add react-redux redux
接下来，在我们的 Next.js 应用程序中，我们需要创建一个 store。我们可以在我们的 _app.js 文件中创建 store。这个文件在每个页面的渲染之前都会运行。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- --------------
----- ----- - -------------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------在这里，我们创建了一个 store，并将其传递给 Provider 组件。Provider 组件是 react-redux 库中的一个高阶组件，它将 store 传递给我们的应用程序中的每个组件。
组织代码
在使用 react-redux 时，我们需要考虑如何组织我们的代码。我们可以将我们的代码分成两个主要部分：Actions 和 Reducers。
Actions 是一个纯 JavaScript 对象，它描述了我们希望应用程序执行的操作。我们可以使用 Actions 来更新我们的应用程序状态。
Reducers 是一个纯函数，它接收一个 Action 和当前状态，并返回新状态。Reducers 是用来更新应用程序状态的。
我们可以将我们的 Actions 和 Reducers 放在一个文件夹中，并使用 index.js 文件来导出它们。
- actions/ - index.js - reducers/ - index.js
在 actions/index.js 文件中，我们可以定义我们的 Actions。例如，我们可以定义一个名为 ADD_TODO 的 Action：
export const ADD_TODO = 'ADD_TODO';
export function addTodo(text) {
return { type: ADD_TODO, text };
}在 reducers/index.js 文件中，我们可以定义我们的 Reducers。例如，我们可以定义一个名为 todos 的 Reducer：
-- -------------------- ---- -------
------ - -------- - ---- -------------
----- ------------ - ---
-------- ----------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- ------
--
--
--------
------ ------
-
-
------ ------- ------使用中间件
在 react-redux 中，我们可以使用中间件来扩展 store 的功能。例如，我们可以使用 Redux Thunk 中间件来处理异步操作。
我们可以在创建 store 时将中间件传递给 createStore 函数。
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));在这里，我们将 Redux Thunk 中间件传递给 createStore 函数，并将其作为第二个参数传递。
测试代码
在使用 react-redux 时，我们需要测试我们的代码。我们可以使用 Jest 和 Enzyme 来测试我们的组件和 Reducers。
在测试组件时，我们可以使用 Enzyme 的 shallow 函数来渲染组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- -----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这里，我们使用 shallow 函数来渲染 MyComponent 组件，并使用 expect 函数来测试它是否与我们的快照匹配。
在测试 Reducers 时，我们可以测试它们是否正确地更新状态。例如：
-- -------------------- ---- -------
------ ----- ---- -----------
------ - -------- - ---- ----------------
--------------- --------- -- -- -
---------- ------ --- ------- ------- -- -- -
----------------------- -----------------
---
---------- ------ ---------- -- -- -
-------
--------- -
----- ---------
----- ----- ------
--
-----------
-
----- ----- ------
---------- ------
--
---
---
---在这里，我们测试 todos Reducer 是否正确地更新状态。
结论
在本文中，我们介绍了 Next.js 中 react-redux 的最佳实践。我们讨论了如何安装和配置 react-redux，如何组织我们的代码，如何使用中间件和如何测试我们的代码。我们希望这些信息对你有所帮助，并能帮助你更好地使用 react-redux 来管理你的应用程序状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673aa7b639d6d08e88af2ea4