第53节——Redux Toolkit初识

一、什么是Redux Toolkit

1、概念

Redux Toolkit是一个官方支持的、用于简化Redux开发的工具集。它提供了一些简单易用的API和工具,可以帮助开发者更快速、更高效地编写Redux应用。

2、主要功能

简化Redux的配置

Redux Toolkit提供了一个createSlice函数,可以用来快速创建Redux的action和reducer,不需要手动编写大量的模板代码。

封装常用的Redux函数

Redux Toolkit提供了一些封装过的Redux函数,如createAsyncThunk、createEntityAdapter等,这些函数可以帮助开发者更加容易地处理异步操作、管理实体数据等常见任务。

整合常用的中间件

Redux Toolkit默认集成了常用的中间件,如redux-thunk、redux-logger等,使得开发者可以更加便捷地使用这些中间件,而不需要手动配置。

提供默认的Redux store配置

Redux Toolkit提供了一个configureStore函数,可以用来快速创建一个Redux store,并且默认配置了许多常用的中间件和插件,减少了开发者的配置工作量。

总结

总的来说,Redux Toolkit可以帮助开发者更加高效地使用Redux,减少了许多样板代码和配置工作,同时提供了一些常用的功能和工具,使得开发者可以更加专注于业务逻辑的实现

二、安装

shell 复制代码
// 如果你已经安装了redux 和 react-redux,则不需要重复安装
npm install @reduxjs/toolkit

三、简单例子

实现数值加、减的功能

1、创建store.js文件

jsx 复制代码
import { configureStore, createSlice } from '@reduxjs/toolkit';

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

const store = configureStore({
  reducer: counterSlice.reducer,
});

export default store;
export const { increment, decrement } = counterSlice.actions;

2、页面中使用

jsx 复制代码
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store";

function App() {
  const count = useSelector((state) => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;
相关推荐
gqkmiss16 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃21 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰26 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye32 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm34 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js