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

编码七号2025-03-19 9:34

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

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

javascript 复制代码

npm install react-redux @reduxjs/toolkit

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

文件夹内新建index.js 和userStore.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'
			}
		})
	}

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