首页 > web前端 > js教程 > 正文

完整的 Redux 工具包(第 1 部分)

WBOY
发布: 2024-09-08 20:31:33
原创
279 人浏览过

Complete Redux toolkit (Part-1)

Redux 工具包的用途

我们已经知道 redux 是 JavaScript 应用程序的一个强大的状态管理库,特别是在使用 React 时。
但是使用 redux 很困难,因为它设置 redux 的代码很繁重。这使得维护和调试变得困难。这就是 Redux Toolkit 可以提供帮助的地方。
Redux 工具包解决的问题

  • 开店太复杂了。
  • 添加许多包以与 redux 一起使用,例如中间件、工具。
  • Redux 需要太多代码来设置

Redux 工具包是官方推荐的编写 redux 逻辑的方法。它提供了一组工具来简化开发,减少样板代码,有助于提高应用程序的可扩展性和可维护性。

Redux 工具包的主要优点:

  1. 更少的样板代码:不再需要动作创建者和常量。
  2. 简化的商店设置:提供单个 API 来使用合理的默认值配置商店。
  3. 内置对不变性和 DevTools 的支持:自动启用 Redux DevTools 并与 Immer 集成以实现不变性。
  4. 更好的 TypeScript 支持:提供更好的打字效果并与 TypeScript 很好地集成。

我们可以将 redux 工具包与任何 javascript 库一起使用,因此我们使用 React 设置 redux 工具包。

在 React 应用程序中设置 Redux 工具包

第 1 步:创建一个新的 React 项目

首先,让我们创建一个新的 React 应用程序。您可以使用 create-react-app 或 Vite 来实现此目的。为了简单起见,我们将在这里使用 create-react-app。

npx create-react-app redux-toolkit-example
cd redux-toolkit-example
登录后复制

第 2 步:安装 Redux 工具包和 React-Redux

接下来,安装必要的软件包:@reduxjs/toolkit 和react-redux。

npm install @reduxjs/toolkit react-redux
登录后复制
  1. 了解切片和减速器

切片是针对应用程序特定功能的 Redux 减速器逻辑和操作的集合。 Redux Toolkit 提供了 createSlice 函数来帮助使用最少的样板创建状态切片。

第 1 步:创建切片
让我们创建一个简单的计数器切片。在 features/counter 目录中创建一个名为 counterSlice.js 的新文件:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
登录后复制

在这里,我们定义了一个名为 counter 的切片,它具有初始状态和三个减速器(increment、decrement 和incrementByAmount)。 createSlice 函数会自动为每个reducer 函数生成动作创建者。

  1. 配置 Redux 存储

现在我们有了切片,让我们配置 Redux 存储。 Redux Toolkit 提供了一个 configureStore 函数,可以使用良好的默认值设置存储。

第 1 步:创建商店
在应用程序目录中创建 store.js 文件:

// src/app/store.js
import { 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.js
import 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 />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
登录后复制
  1. 将组件连接到商店

要与 Redux 存储交互,请使用react-redux 提供的 useSelector 和 useDispatch 钩子。
第 1 步:使用 useSelector
访问状态 使用 useSelector 钩子从 store 访问状态

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;
登录后复制

第 2 步:在您的应用中使用计数器组件
在主应用程序组件中导入并使用 Counter 组件:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;
登录后复制
  1. 结论和后续步骤

在这一部分中,我们介绍了在 React 应用程序中设置 Redux Toolkit 的基础知识,包括创建切片、配置存储以及使用钩子将组件连接到 Redux 存储。在下一部分中,我们将深入研究使用 createAsyncThunk 处理异步逻辑,以从 API 获取数据并管理不同的加载状态。

敬请关注第 2 部分:高级 Redux 工具包 - 使用 createAsyncThunk 的异步逻辑!

以上是完整的 Redux 工具包(第 1 部分)的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!