Redux状态更新时如何自动刷新组件 如何持久化Redux数据

问题1：Redux状态更新后TopBar不自动重渲染 #

原因 #

你当前TopBar组件直接调用store.getState()读取状态的写法，只能在组件首次渲染时获取一次值，没有订阅Redux的状态变更事件，因此Redux状态更新时组件无法感知，自然不会触发重渲染，不需要手动触发强制重渲染，只要按照react-redux的规范订阅状态即可自动更新。

修复方案 #

使用react-redux提供的useSelector钩子订阅对应状态，状态变化时会自动触发组件重渲染，修改后的TopBar代码如下：

import { useSelector } from 'react-redux'

const TopBar = () => {
  // 订阅Redux中的用户名状态，变更时自动触发重渲染
  const userName = useSelector(state => state.userNameRecuder.name)
  return(
    ...
    <h5>{userName}</h5>
    ...
  )
}

问题2：刷新页面后用户名消失 #

原因 #

Redux本身是基于内存的状态管理工具，页面刷新后内存中的所有状态都会被重置，本身没有内置持久化能力，但可以通过两种常见方案实现数据持久化：

方案1：手动结合localStorage实现（轻量需求推荐） #

1. 登录成功dispatch状态更新时，同步将用户名存入localStorage：

const handleLogin = async googleData => {
  ...
  store.dispatch(nameActionCreator(googleData.profileObj.name));
  // 新增：存入localStorage持久化
  localStorage.setItem('userName', googleData.profileObj.name)
  ...
}

2. 配置userNameRecuder的初始值从localStorage读取：

const initialState = {
  name: localStorage.getItem('userName') || ''
}
const userNameRecuder = (state = initialState, action) => {
  // 原有reducer逻辑
}

方案2：使用redux-persist库实现（全量状态持久化推荐） #

如果需要持久化的Redux状态较多，可以直接使用成熟的redux-persist库自动完成持久化逻辑：

1. 安装依赖

npm install redux-persist

2. 配置store支持持久化

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认使用localStorage存储
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['userNameRecuder'] // 配置只需要持久化的reducer，避免无用状态存储
}

const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = createStore(persistedReducer)
export const persistor = persistStore(store)

3. 入口文件用PersistGate包裹根组件

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'
import App from './App'

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

效果参考 #

• 登录前：
• 登录后：

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