Next JS 项目中的 Redux。 |技术的

Next JS 项目中的 Redux。 |技术的

让我们使用 Redux 使 Next Js 前端状态管理变得流畅。

Next JS，是一个有潜力做大的框架。如果您是使用过 React JS、Node JS 或 Javascript 的全栈开发人员，可以轻松了解 Next JS 代码结构。

Next js 通俗地说可以定义为一个框架，让你能够构建快速的 Web 应用程序。使用 next js，我们可以在同一个代码库中编写前端和后端代码，从而更容易维护代码。

Image edited by Author using Canva.

Next Js 为您提供快速引导代码，您可以在其中启动项目构建，而无需担心在设置项目时会忙于工作。除了开发速度之外，我们还可以使用 Next Js 获得各种其他好处，例如我们可以获得预渲染页面以获得更好的 SEO。

在这个时代，搜索引擎优化是我们正在寻找的东西，以更好地覆盖我们的产品。所以这对每个人来说都是一场胜利。在本文中，我们不会讨论 Next JS 设置和所有内容，因为您可以在任何地方轻松找到相关教程。

但是设置 Redux 和 Next JS 应用程序的斗争。如果你有 react-redux 背景，你会知道 redux 在构建可扩展应用程序时可以带来的好处。所以事不宜迟，让我们开始吧。

设置下一个 JS 项目

第一步也是最重要的一步是，您应该有一个可供您使用的下一个 js 项目来练习设置以及阅读教程，因为它将帮助您更好地理解这些概念。

现在为了设置基本的下一个 js 项目，我们可以简单地使用以下命令，即 npx 创建下一个应用程序 后跟新项目的名称。

在这里你可以看到我们正在创建一个名称为的项目 redis-next-教程 ，只是一个随机的名字。您可以使用您选择的任何合适的项目名称来命名它。

**npx create-next-app redis-next-tutorial**

在终端上运行上述命令后，您将看到以下进度屏幕，让我们知道所有东西都在安装什么。

大多数事情都完成了，您将能够看到一个名为 redis-next-教程 在您的文件系统中。您可以在您选择的任何代码编辑器中打开代码并至少浏览一次。

安装 Redux

现在，一旦完成了基本代码设置，我们的代码就可以使用 React 代码和 API。现在是我们可以使用以下命令将 redux 安装到我们的代码库的正确时机。

以下是社区广泛使用的用于将 React 应用程序与 redux 存储连接的包。

**npm i react-redux**

完成上述步骤后，我们就完成了项目的 react-redux 基本安装。

设置 store.js

以下是设置全局 redux 存储的代码。 redux store 中有我们使用创建 store 和 applyMiddleware 等方法的代码。这将帮助我们初始化组件将使用的全局存储。

因此，您还可以在这里检查我们从不同文件夹导入的中间件逻辑，以及减速器逻辑。中间件和reducer的代码将在教程的后面部分检查。

现在对于这个 reducer 设置，我们可以删除 reducer 的逻辑，因为我们没有使用任何特定的中间件，如 react thunk、saga 等，因为这超出了本教程的范围。

所以简而言之，我们可以说这个 store.js 文件是我们全局商店的引导代码。

 从'redux'导入{createStore，applyMiddleware}；  
 从“中间件/索引”导入{中间件}；  
 从'reducers'导入{rootReducer}；  
 从'redux-devtools-extension'导入{composeWithDevTools}； const CombinedMiddleware = applyMiddleware(...Middleware);  
 导出常量存储 = createStore(  
 根减速器，  
 composeWithDevTools（组合中间件）  
 );

减速器

让我们创建一个 reducer 文件夹，我们将在其中保存所有与 reducer 相关的代码。在这里，您可以检查我们是否有用户 combineReducers 方法，该方法用于组合所有子减速器。

创建多个reducer 的目的是保持代码干净，最后，我们将它们组合到根reducer 中。正如在 rootReducer 中所讨论的，您可以检查所有子减速器是否已合并和导出。如上一节所示，它们又被导入到 store js 文件中。

 从“redux”导入 { combineReducers }；  
 从“./auth”导入{身份验证}； 导出 const rootReducer = combineReducers({  
 authReducer：身份验证  
 });

连接方法

一旦我们完成了我们的 redux 设置，是时候将我们的组件与 redux 存储连接起来了。

在下面的示例中，您可以检查我是否从 react-redux 导入了连接方法。我们可以通过在 connect 方法中传递参数来映射本地状态和全局状态。

 从“反应”导入反应； 从“react-router-dom”导入 { BrowserRouter } 从 'prop-types' 导入 PropTypes 从“容器/导航栏”导入导航栏； 从“路线”导入 CustomRoutes；  
 从“组件/微调器”导入微调器；  
 **从'react-redux'导入{连接}；** 导入'./App.css'； 功能应用程序（道具）{  
 返回 （ {/* 加载器，当任何 api 调用时 */}  
 {props.loading &&<Spinner /> }  
 <div className="wrapper">  
 </div>  
 );  
 } App.propTypes = {  
 加载：PropTypes.bool，  
 } 应用程序默认 = {  
 加载：假，  
 } 函数mapStatesToProps（状态）{  
 返回 {  
 加载：state.App.loading，  
 }  
 } const mapDispatchToProps = {  
 } **导出默认连接（mapStatesToProps，mapDispatchToProps）（App）；**

在这里，我们映射了我们在连接函数中传递的两个方法，即 mapStatesToProps 和 mapDispatchToProps。一种方法用于将全局状态映射到本地方法。

此外，当我们在应用程序中创建动作时，我们可以使用 react-thunk 或 react-saga 中间件，它们为您提供更好的动作实现。

最后的想法

所以基本上在本教程中，我们所做的只是为我们的下一个 js 项目设置 redux。现在，为了准备好项目开发，您还需要实现 react-thunk 或 react-saga。

因为我们需要一些操作来更新 reducer 中的状态。因为我们不直接更新 redux 全局状态中的状态。希望我能尽快发布设置 React thunk 的教程以及 Next JS 项目。请继续关注。

关于作者

Apoorv Tomar 是一名软件开发人员，也是 头脑风暴 .你可以和他联系 推特 , 领英 , 电报 ， 和 Instagram .订阅 通讯 获取最新的策划内容。不要犹豫在任何平台上说“嗨”，只需说明您在哪里找到我的个人资料的参考。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38848/32332311