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. 使用
相关推荐
Zacks_xdc12 分钟前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|20 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊23 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin111 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript