完整的 Redux 工具包（第 1 部分）

redux 工具包的用途我们已经知道 redux 是 javascript 应用程序的一个强大的状态管理库，特别是在使用 react 时。但是使用 redux 很困难，因为它设置 redux 的代码很繁重。这使得维护和调试变得困难。这就是 redux toolkit 可以提供帮助的地方。 redux 工具包解决的问题开店太复杂了。添加许多包以与 redux 一起使用，例如中间件、工具。redux 需要太多代码来设置 redux 工具包是官方推荐的编写 redux 逻辑的方法。它提供了一组工具来简化开发，减少样板代码，有助于提高应用程序的可扩展性和可维护性。redux 工具包的主要优点：更少的样板代码：不再需要动作创建者和常量。简化的商店设置：提供单个 api 来使用合理的默认值配置商店。内置对不变性和 devtools 的支持：自动启用 redux devtools 并与 immer 集成以实现不变性。更好的 typescript 支持：提供更好的打字效果并与 typescript 很好地集成。我们可以将 redux 工具包与任何 javascript 库一起使用，因此我们使用 react 设置 redux 工具包。在 react 应用程序中设置 redux 工具包第 1 步：创建一个新的 react 项目首先，让我们创建一个新的 react 应用程序。您可以使用 create-react-app 或 vite 来实现此目的。为了简单起见，我们将在这里使用 create-react-app。npx create-react-app redux-toolkit-examplecd redux-toolkit-example登录后复制第 2 步：安装 redux 工具包和 react-redux接下来，安装必要的软件包：@reduxjs/toolkit 和react-redux。npm install @reduxjs/toolkit react-redux登录后复制了解切片和减速器切片是针对应用程序特定功能的 redux 减速器逻辑和操作的集合。 redux toolkit 提供了 createslice 函数来帮助使用最少的样板创建状态切片。第 1 步：创建切片让我们创建一个简单的计数器切片。在 features/counter 目录中创建一个名为 counterslice.js 的新文件：// src/features/counter/counterslice.jsimport { createslice } from '@reduxjs/toolkit';const initialstate = { value: 0,};const counterslice = createslice({ name: 'counter', initialstate, reducers: { increment: (state) =&gt; { state.value += 1; }, decrement: (state) =&gt; { state.value -= 1; }, incrementbyamount: (state, action) =&gt; { state.value += action.payload; }, },});export const { increment, decrement, incrementbyamount } = counterslice.actions;export default counterslice.reducer;登录后复制在这里，我们定义了一个名为 counter 的切片，它具有初始状态和三个减速器（increment、decrement 和incrementbyamount）。 createslice 函数会自动为每个reducer 函数生成动作创建者。配置 redux 存储现在我们有了切片，让我们配置 redux 存储。 redux toolkit 提供了一个 configurestore 函数，可以使用良好的默认值设置存储。第 1 步：创建商店在应用程序目录中创建 store.js 文件：// src/app/store.jsimport { configurestore } from '@reduxjs/toolkit';import counterreducer from '../features/counter/counterslice';const store = configurestore({ reducer: { counter: counterreducer, },});export default store;登录后复制第 2 步：为您的应用程序提供商店将您的 react 应用程序包装在react-redux 的组件中并将其传递给商店。更新index.js文件：// src/index.jsimport react from 'react';import reactdom from 'react-dom';import './index.css';import app from './app';import { provider } from 'react-redux';import store from './app/store';reactdom.render( <react.strictmode><provider store="{store}"><app></app></provider></react.strictmode>, document.getelementbyid('root'));登录后复制将组件连接到商店要与 redux 存储交互，请使用react-redux 提供的 useselector 和 usedispatch 钩子。第 1 步：使用 useselector 访问状态使用 useselector 钩子从 store 访问状态// src/features/counter/counter.jsimport react from 'react';import { useselector, usedispatch } from 'react-redux';import { increment, decrement, incrementbyamount } from './counterslice';const counter = () =&gt; { const count = useselector((state) =&gt; state.counter.value); const dispatch = usedispatch(); return ( <div> <h1>{count}</h1> <button onclick="{()"> dispatch(increment())}&gt;increment</button> <button onclick="{()"> dispatch(decrement())}&gt;decrement</button> <button onclick="{()"> dispatch(incrementbyamount(5))}&gt;increment by 5</button> </div> );};export default counter;登录后复制第 2 步：在您的应用中使用计数器组件在主应用程序组件中导入并使用 counter 组件：// src/App.jsimport React from 'react';import Counter from './features/counter/Counter';function App() { return ( <div classname="App"> <counter></counter></div> );}export default App;登录后复制结论和后续步骤在这一部分中，我们介绍了在 react 应用程序中设置 redux toolkit 的基础知识，包括创建切片、配置存储以及使用钩子将组件连接到 redux 存储。在下一部分中，我们将深入研究使用 createasyncthunk 处理异步逻辑，以从 api 获取数据并管理不同的加载状态。敬请关注第 2 部分：高级 redux 工具包 - 使用 createasyncthunk 的异步逻辑！ 以上就是完整的 Redux 工具包（第 1 部分）的详细内容，更多请关注我的其它相关文章！