如何在useEffect中访问Redux Store当前状态？登录token设置问题

你的代码存在两个核心问题：

• getLoggedUser reducer未正确接收state参数，也未在无本地存储数据时返回原有状态，导致store无法正确更新用户信息
• useEffect中dispatch后直接调用blogService.setToken，此时store还未完成更新，无法获取有效user.token

1. 修复loginSlice的getLoggedUser reducer #

修改reducer，确保它正确处理state并返回新状态：

const loginSlice = createSlice({
  name: 'login',
  initialState: null,
  reducers: {
    setUser(state, action) {
      return action.payload
    },
    setLoggedUser(state, action) {
      window.localStorage.setItem(
        'loggedBlogappUser',
        JSON.stringify(action.payload)
      )
    },
    // 修复：接收state参数，无数据时返回原状态
    getLoggedUser(state) {
      const loggedUserJSON = window.localStorage.getItem('loggedBlogappUser')
      if (loggedUserJSON) {
        return JSON.parse(loggedUserJSON)
      }
      return state
    },
  },
})

2. 在组件中获取并使用store中的用户信息 #

使用useSelector从Redux store读取登录状态，拆分useEffect确保token在用户状态更新后再设置：

import { useSelector, useDispatch } from 'react-redux'
import { getLoggedUser } from '../path/to/loginSlice'
import blogService from '../path/to/blogService'

const YourComponent = () => {
  const dispatch = useDispatch()
  // 从store中获取用户信息，state.login对应切片的name字段
  const user = useSelector(state => state.login)

  // 初始化时触发获取本地存储的用户
  useEffect(() => {
    dispatch(getLoggedUser())
  }, [dispatch])

  // 当user状态变化且存在时，设置token
  useEffect(() => {
    if (user) {
      blogService.setToken(user.token)
      // 此处可直接访问user的其他字段，比如user.id、user.username等
    }
  }, [user])

  return (
    // 组件内容
  )
}

关键说明 #

• Redux reducer必须接收state和action参数（即使action未被使用），返回值会作为新的state
• useSelector会订阅store变化，当state.login更新时，组件会重新渲染并拿到最新用户信息
• 拆分两个useEffect，避免初始时user为null导致的token设置错误

内容的提问来源于stack exchange，提问作者ancxanas