React低代码项目：Redux 状态管理

吐司问卷：Redux 状态管理

Date: February 18, 2025 5:37 PM (GMT+8)

---

Redux 管理用户信息

命名规范：

以 Info 结尾表示获取Reudx信息，比如 useGetUserInfo.ts

以 data 结尾表示获取服务端信息，比如 useLoadQuestionData

---

---

采用 Redux 管理用户信息

Redux store 设计：

src/store/index.ts

import { configureStore } from '@reduxjs/toolkit'
import userReducer, { UserStateType } from './userReducer'

export type StateType = {
  user: UserStateType
}

export default configureStore({
  reducer: {
    user: userReducer,
  },
})

userReducer 开发：

src/store/userReducer.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export type UserStateType = {
  username: string
  nickname: string
}

const INIT_STATE: UserStateType = {
  username: '',
  nickname: '',
}

export const userSlice = createSlice({
  name: 'user',
  initialState: INIT_STATE,
  reducers: {
    loginReducer: (
      state: UserStateType,
      action: PayloadAction<UserStateType>
    ) => {
      return action.payload
    },
    logoutReducer: () => {
      return INIT_STATE
    },
  },
})

export const { loginReducer, logoutReducer } = userSlice.actions
export default userSlice.reducer

src/index.ts

 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { Provider } from 'react-redux'
+import store from './store'
 import App from './App'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 )