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. 使用
相关推荐
YGY_Webgis糕手之路2 分钟前
Leaflet 综合案例 - 路径规划
前端·gis
sq8002 分钟前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
前端灵派派3 分钟前
cesium 实现轨迹回放
前端·cesium
水纹3 分钟前
继续研究pdfjs保存和还原批注
前端
兔年鸿运Q小Q4 分钟前
html转word下载
javascript·vue.js·word
程序员海军4 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·aigc
你这个年龄怎么睡得着的7 分钟前
玩转vite性能优化
前端·vue.js·vite
YGY_Webgis糕手之路8 分钟前
OpenLayers 综合案例-热力图
前端·gis
小阿鑫11 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·python·admin·kiro·next admin·fastapi admin
华洛11 分钟前
Agent应用落地,必不可少的三大辅助系统
前端·javascript·vue.js