Next JS 项目中的 Redux。|技术的 - Powered by Discuz! Archiver

西瓜哥哥 發表於 2022-9-23 11:33:00

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

<h1 id="next-js-项目中的-redux-技术的">Next JS 项目中的 Redux。 |技术的</h1>
让我们使用 Redux 使 Next Js 前端状态管理变得流畅。
Next JS，是一个有潜力做大的框架。如果您是使用过 React JS、Node JS 或 Javascript 的全栈开发人员，可以轻松了解 Next JS 代码结构。
Next js 通俗地说可以定义为一个框架，让你能够构建快速的 Web 应用程序。使用 next js，我们可以在同一个代码库中编写前端和后端代码，从而更容易维护代码。
<img src="https://qanswer-1251273400.cos.ap-hongkong.myqcloud.com/post_images/4f4a541fdf93145cff9bc4958933643f.jpg">
Image edited by Author using Canva.
Next Js 为您提供快速引导代码，您可以在其中启动项目构建，而无需担心在设置项目时会忙于工作。除了开发速度之外，我们还可以使用 Next Js 获得各种其他好处，例如我们可以获得预渲染页面以获得更好的 SEO。
在这个时代，搜索引擎优化是我们正在寻找的东西，以更好地覆盖我们的产品。所以这对每个人来说都是一场胜利。在本文中，我们不会讨论 Next JS 设置和所有内容，因为您可以在任何地方轻松找到相关教程。
但是设置 Redux 和 Next JS 应用程序的斗争。如果你有 react-redux 背景，你会知道 redux 在构建可扩展应用程序时可以带来的好处。所以事不宜迟，让我们开始吧。
<h1 id="设置下一个-js-项目">设置下一个 JS 项目</h1>
第一步也是最重要的一步是，您应该有一个可供您使用的下一个 js 项目来练习设置以及阅读教程，因为它将帮助您更好地理解这些概念。
现在为了设置基本的下一个 js 项目，我们可以简单地使用以下命令，即 npx 创建下一个应用程序 后跟新项目的名称。
在这里你可以看到我们正在创建一个名称为的项目 redis-next-教程 ，只是一个随机的名字。您可以使用您选择的任何合适的项目名称来命名它。
<pre><code>**npx create-next-app redis-next-tutorial**
</code></pre>
在终端上运行上述命令后，您将看到以下进度屏幕，让我们知道所有东西都在安装什么。
<img src="https://qanswer-1251273400.cos.ap-hongkong.myqcloud.com/post_images/27cccacc94c5aed557ed2b7ba220a623.jpg">
大多数事情都完成了，您将能够看到一个名为 redis-next-教程 在您的文件系统中。您可以在您选择的任何代码编辑器中打开代码并至少浏览一次。
<h1 id="安装-redux">安装 Redux</h1>
现在，一旦完成了基本代码设置，我们的代码就可以使用 React 代码和 API。现在是我们可以使用以下命令将 redux 安装到我们的代码库的正确时机。
以下是社区广泛使用的用于将 React 应用程序与 redux 存储连接的包。
<pre><code>**npm i react-redux**
</code></pre>
完成上述步骤后，我们就完成了项目的 react-redux 基本安装。
<h1 id="设置-storejs">设置 store.js</h1>
以下是设置全局 redux 存储的代码。 redux store 中有我们使用创建 store 和 applyMiddleware 等方法的代码。这将帮助我们初始化组件将使用的全局存储。
因此，您还可以在这里检查我们从不同文件夹导入的中间件逻辑，以及减速器逻辑。中间件和reducer的代码将在教程的后面部分检查。
现在对于这个 reducer 设置，我们可以删除 reducer 的逻辑，因为我们没有使用任何特定的中间件，如 react thunk、saga 等，因为这超出了本教程的范围。
所以简而言之，我们可以说这个 store.js 文件是我们全局商店的引导代码。
<pre><code> 从'redux'导入{createStore，applyMiddleware}；
从“中间件/索引”导入{中间件}；
从'reducers'导入{rootReducer}；
从'redux-devtools-extension'导入{composeWithDevTools}； const CombinedMiddleware = applyMiddleware(...Middleware);
导出常量存储 = createStore(
根减速器，
composeWithDevTools（组合中间件）
);
</code></pre>
<h1 id="减速器">减速器</h1>
让我们创建一个 reducer 文件夹，我们将在其中保存所有与 reducer 相关的代码。在这里，您可以检查我们是否有用户 combineReducers 方法，该方法用于组合所有子减速器。
创建多个reducer 的目的是保持代码干净，最后，我们将它们组合到根reducer 中。正如在 rootReducer 中所讨论的，您可以检查所有子减速器是否已合并和导出。如上一节所示，它们又被导入到 store js 文件中。
<pre><code> 从“redux”导入 { combineReducers }；
从“./auth”导入{身份验证}；导出 const rootReducer = combineReducers({
authReducer：身份验证
});
</code></pre>
<h1 id="连接方法">连接方法</h1>
一旦我们完成了我们的 redux 设置，是时候将我们的组件与 redux 存储连接起来了。
在下面的示例中，您可以检查我是否从 react-redux 导入了连接方法。我们可以通过在 connect 方法中传递参数来映射本地状态和全局状态。
<pre><code> 从“反应”导入反应；从“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）；**
</code></pre>
在这里，我们映射了我们在连接函数中传递的两个方法，即 mapStatesToProps 和 mapDispatchToProps。一种方法用于将全局状态映射到本地方法。
此外，当我们在应用程序中创建动作时，我们可以使用 react-thunk 或 react-saga 中间件，它们为您提供更好的动作实现。
<h1 id="最后的想法">最后的想法</h1>
所以基本上在本教程中，我们所做的只是为我们的下一个 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 
来源：https://www.cnblogs.com/amboke/p/16722145.html

頁: [1]

琼殿技术论坛's Archiver

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