【React】使用reduxjs/toolkit进行状态管理

在我们的项目中通常需要维护一个状态管理器来支持我们进行跨组件的数据通讯,react生态提供了reduxjs/toolkit 来进行状态管理

首先我们安装一下必要的依赖

javascript 复制代码
npm install react-redux @reduxjs/toolkit

接下来在我们的工程项目的src同级目录里面新建文件夹store

文件夹内新建index.jsuserStore.js 文件
userStore文件:

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

const initialState = {
  userName: '',
  token: '',  
}

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.userName = action.payload.userName;
      state.token = action.payload.token;
    },
    removeUser: (state) => {
      state.user = null;
      state.token = null;
    },
  },
});

export const { setUser, removeUser } = userSlice.actions;

export default userSlice.reducer;

index.js文件

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

export const store =  configureStore({
    reducer: {
        user: userReducer
    }
});

项目入口文件index.js

javascript 复制代码
import App from './App'
import { Provider } from 'react-redux';
import { store } from './store/index';

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
)

在组件中使用:

javascript 复制代码
const userName = useSelector(state => state.user.userName);
const dispatch = useDispatch();
const setUserInfo = ()=>{
		dispatch({
			type: 'user/setUser',
			payload: {
				userName: 'admin',
				token:'6666666'
			}
		})
	}

这样,一个简单的状态管理配置就完成了!

相关推荐
zwjapple8 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说2 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python