如何在Redux的useStore中存储简单变量并在其他函数中调用？

• 你对useStore的功能理解完全错误，它不是类似useState的响应式状态Hook，作用是获取整个Redux的store实例，不支持传入初始值返回[状态, 修改方法]的结构。
• Redux不允许直接修改全局状态，所有状态变更必须通过触发action实现，不能自定义修改方法。
• 不能直接通过useStore.user_name读取状态，需要调用store实例的getState()方法才能拿到当前状态，且原生useStore不会监听状态变化，状态更新后不会触发组件重渲染，不适合在组件中用来读取状态。

推荐直接使用官方推出的Redux Toolkit，简化配置逻辑，无需编写复杂的模板代码。

1. 安装依赖 #

需要安装两个包：@reduxjs/toolkit、react-redux

2. 创建全局状态仓库 #

新建store.js文件，写入以下内容：

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

// 定义用户名状态切片
const userNameSlice = createSlice({
  name: 'userName',
  // 初始值可以设置为空或者你需要的默认值
  initialState: '',
  reducers: {
    // 修改用户名的方法
    setUserName: (state, action) => action.payload
  }
})

// 导出修改状态用的action方法
export const { setUserName } = userNameSlice.actions

// 创建全局store
export const store = configureStore({
  reducer: userNameSlice.reducer
})

3. 全局注入store #

在项目入口文件（通常是index.js/main.jsx）中，用Provider组件包裹整个应用，将store注入全局：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './store'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

4. 组件中读写状态 #

写入状态的组件 #

import { useDispatch } from 'react-redux'
import { setUserName } from './store'

function WriteComponent() {
  const dispatch = useDispatch()
  // 需要修改用户名时调用
  const handleAdd = () => {
    dispatch(setUserName('jimmy'))
  }
  return <button onClick={handleAdd}>保存用户名</button>
}

读取状态的组件 #

import { useSelector } from 'react-redux'

function ReadComponent() {
  // useSelector会自动监听状态变化，状态更新后自动触发组件重渲染
  const userName = useSelector(state => state)
  return <div>当前用户名：{userName}</div>
}

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