react状态管理工具reduxjs/toolkit用法

安装 npm install @reduxjs/toolkit

1.创建一个名为counterSlice.js的文件,用于处理计数器模块的状态:

javascript 复制代码
import { createSlice } from '@reduxjs/toolkit';

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

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

2.创建一个名为userSlice.js的文件,用于处理用户信息模块的状态:

javascript 复制代码
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: '',
    age: null,
  },
  reducers: {
    setName(state, action) {
      state.name = action.payload;
    },
    setAge(state, action) {
      state.age = action.payload;
    },
  },
});

export const { setName, setAge } = userSlice.actions;
export default userSlice.reducer;

3.创建一个Redux store并将这些模块整合起来。创建一个名为store.js的文件:

javascript 复制代码
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
  },
});

export default store;

4.在你的应用程序的入口处,将store与React应用程序进行连接。创建一个名为App.js的文件:

javascript 复制代码
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';
import User from './User';

function App() {
  return (
    <Provider store={store}>
      <div>
        <Counter />
        <User />
      </div>
    </Provider>
  );
}

export default App;

在组件Counter.js中使用

javascript 复制代码
import { useDispatch,useSelector } from 'react-redux';
import {increment} from '../store/reducer/counterSlice'
export default function Counter() {
     const value= useSelector(state=>state.counter.value);
     const dispatch = ();
  const changeValue = ()=>{
        dispatch(increment())
    }
  return (
    <div>
        {value}
        <button onClick={changeValue}>修改value</button>
    </div>
  )
}
相关推荐
gnip27 分钟前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty34 分钟前
基于hiprint的票据定位打印系统开发实践
javascript
百思可瑞教育2 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
Enddme3 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
力Mer3 小时前
全排列-遇到的深浅拷贝问题
javascript
德育处主任3 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
安卓开发者4 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
fdc20174 小时前
Avalonia 基础导航实现:从页面切换到响应式交互全指南
开发语言·javascript·ecmascript
小菜花295 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
前端小巷子6 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试