如何从React-Redux持久化存储中读取并渲染数据

尝试将React Store中的数据输出到组件，使用redux-persist维持页面刷新后的数据，但无法渲染到页面。已尝试用react-redux的useSelector钩子，但未成功。技术栈：Redux Toolkit + redux-persist。

Index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from 'react-redux'
import store from "./store";
import "./index.css";
import App from "./App";
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

const root = ReactDOM.createRoot(document.getElementById("root"));
let persistor = persistStore(store)

root.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
)

Cart组件 #

import React from 'react'
import { useSelector } from 'react-redux'

export default function Cart() {
  const cartItems = useSelector((state) => state.test)

  return <div className='pt-20'>{cartItems}</div>
}

Store配置文件 #

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import cartReducer from './slices/cartSlice'
import storage from "redux-persist/lib/storage"
import { 
  persistReducer, 
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER, 
} from "redux-persist"

const persistConfig = {
  key: 'root',
  version: 1,
  storage
}

const reducer = combineReducers({
  cart: cartReducer,
})

const persistedReducer = persistReducer(persistConfig, reducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

export default store

Cart Slice #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  cartItems: [],
  cartTotalQuantity: 0,
  cartTotalAmount: 0,
  test: 'hello',
}

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart(state, action) {
      state.cartItems.push(action.payload)
    },
    removeFromCart(state, action) {
      state.cartItems.pop(action.payload)
    },
    increment(state) {
      state.counter++
    },
    resetPrice(state) {
      state.counter = 0
    },
  },
})

export const cartActions = cartSlice.actions

export default cartSlice.reducer

1. 修正useSelector的状态路径 #

Store通过combineReducers把cartReducer挂载到了cart字段下，所以test属性的正确路径是state.cart.test，而非state.test。修改Cart组件的useSelector：

import React from 'react'
import { useSelector } from 'react-redux'

export default function Cart() {
  // 修正状态路径
  const testText = useSelector((state) => state.cart.test)
  // 获取购物车列表同样需要从cart字段下取
  const cartItems = useSelector((state) => state.cart.cartItems)

  return (
    <div className='pt-20'>
      <p>{testText}</p>
      {/* 数组数据需要遍历渲染，避免显示[object Object] */}
      <ul>
        {cartItems.map((item, index) => (
          <li key={index}>{JSON.stringify(item)}</li>
        ))}
      </ul>
    </div>
  )
}

2. 确认redux-persist配置有效性 #

当前Store的persist配置是正确的：

• 已用persistReducer包装根reducer
• 忽略了redux-persist相关动作的序列化检查
• 用PersistGate包裹App组件，确保数据恢复完成后再渲染页面

3. 数组数据的渲染注意事项 #

直接输出数组会显示[object Object]，必须通过map遍历生成DOM元素，才能正确展示数组内容。

内容的提问来源于stack exchange，提问作者maxheezy's