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
    ) => {
      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(
   
-    
+    
+      
+    
   
 )

---

---

点击Logo跳转优化

**需求：**原本点击 Logo 会跳转到 home 页。现在需要根据是否有用户信息，进行区分判断。

如果有用户信息，点击 Logo 则跳转到管理页面。没有则到 home 页面。

src/component/Logo.tsx

-import React, { FC } from 'react'
+import React, { FC, useState, useEffect } from 'react'
 import { Space, Typography } from 'antd'
 import { BlockOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
+import useGetUserInfo from '../hooks/useGetUserInfo'
+import { HOME_PATHNAME, MANAGE_INDEX_PATHNAME } from '../router/index'
 import styles from './Logo.module.scss'
 
 const { Title } = Typography
 
 const Logo: FC = () => {
+  const { username } = useGetUserInfo()
+  const [pathname, setPathname] = useState(HOME_PATHNAME)
+  useEffect(() => {
+    if (username) {
+      setPathname(MANAGE_INDEX_PATHNAME)
+    }
+  }, [username])
   return (
     

-      
+