React Redux新手问题：如何从store中获取存储的状态数据

一、dispatch动作执行后状态的存储位置 #

所有通过Redux更新的状态，都统一存储在你应用顶层注册的全局Redux Store实例的内存中，这个Store实例是你调用Redux Toolkit的configureStore方法创建、并通过react-redux的<Provider>组件注入到整个React应用的。
结合你写的user模块代码：

• 你调用createSlice时传入了name: "user"，当你在configureStore的reducer配置中把user.reducer挂载到user字段下（这是Redux社区约定的对应写法），所有和user相关的状态都会存在全局状态树的state.user节点下，结构和你定义的initialState完全一致。
• 当你dispatch同步action或者异步thunk触发的同步action时，Redux会执行对应的reducer逻辑，更新state.user节点下的对应字段，更新后的状态仍然保存在Store的内存中，除非你手动刷新页面、重置Store，或者配置了持久化方案，否则状态会在应用运行期间一直存在。

注意：你现有代码存在一个字段不匹配的bug：catch分支中dispatchUserFaildLoadData时传入的payload是{login_error: true, error_message}，但reducer中读取的是action.payload.error，会导致错误状态无法正常赋值，需要统一两个位置的字段名。

二、从Store中读取用户状态的方法 #

读取Redux Store中的状态需要使用react-redux提供的useSelector钩子，在使用前请先确认你已经完成了两项基础配置：

1. 正确创建Store实例并注册user模块的reducer，示例代码：

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import userReducer from '../path/to/your/userSlice'

export const store = configureStore({
  reducer: {
    // 这里的key就是全局state上访问该模块状态的路径，命名为user即可对应state.user
    user: userReducer,
    // 其他业务模块的reducer可在此处继续注册
  }
})

2. 在应用根组件外层包裹Provider并传入创建好的store，示例代码：

// src/index.js
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'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

完成配置后，就可以在任意函数组件中调用useSelector读取需要的状态，示例代码：

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { UserLoad } from '../path/to/your/userThunk'

export default function UserInfo() {
  const dispatch = useDispatch()
  // useSelector接收一个选择器函数，入参是全局state，返回你需要的状态片段
  const { 
    id, 
    username, 
    email, 
    avatar_url, 
    userLoad_error, 
    error_message 
  } = useSelector(state => state.user)

  useEffect(() => {
    dispatch(UserLoad())
    // 把dispatch加入依赖数组是官方推荐的写法，避免eslint警告
  }, [dispatch])

  // 直接基于拿到的状态做渲染逻辑即可
  if (userLoad_error) {
    return <div>用户信息加载失败：{error_message}</div>
  }

  if (!id) {
    return <div>用户信息加载中...</div>
  }

  return (
    <div className="user-profile">
      <img src={avatar_url} alt={`${username}的头像`} style={{width: 64, height: 64, borderRadius: '50%'}} />
      <p>用户名：{username}</p>
      <p>绑定邮箱：{email}</p>
    </div>
  )
}

读取状态的注意事项 #

• useSelector会自动订阅Store的状态更新，只要你选择的state.user下的字段发生变化，组件会自动重渲染获取最新值，不需要手动写订阅逻辑。
• 传入useSelector的选择器函数必须是纯函数，不要在函数内部修改state、执行异步操作，只做取值返回即可。
• 不要每次都在选择器里返回整个state.user，建议按需解构你需要的字段，减少不必要的组件重渲染。

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