React(六)——Redux


文章目录


项目地址

  • 教程作者:
  • 教程地址:
复制代码
  • 代码仓库地址:
复制代码
  • 所用到的框架和插件:

    dbt
    airflow

基本理解

store: 类似于一个全局函数,使得你在程序的任何地方都可以访问到里面的数据和方法,由多个Slice组成

action:type用来指定操作,payload:则是需要改变的数据

reducer:根据action的type和payload,来执行type的的动作,payload的数据,不会直接修改数据,只是复制

一、配置Redux store

  1. state文件夹下,创建store.js
js 复制代码
import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});
  1. src/index.js下,将store配置给App
js 复制代码
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

二、创建slice配置到store里并使用

  1. state文件夹下创建settingsSlice使用createSlice()创建
  1. 将上面的slice导入到store里
js 复制代码
import { configureStore } from "@reduxjs/toolkit";
import settingsReducer from "./settingsSlice";

export const store = configureStore({
  reducer: {
    settings: settingsReducer,
  },
});
  1. 使用useSelector访问state管理器的settingsSlice

三、给Slice配置reducers,用来修改初始值

  1. settingsSlice里配置自己的reducer,并导出
  1. 使用
相关推荐
૮・ﻌ・1 分钟前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
小小爱大王43 分钟前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往43 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听1 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎1 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle1 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落1 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611271 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端