我正在尝试将数据从React存储输出到组件中。我正在使用redux-persist在页面重新加载时维护整个站点中的数据。但是,我不知道如何将数据呈现到页面上。我尝试在组件上使用react-redux中的{ useSelector }挂钩,但这无法将数据从存储呈现到页面上。我还在使用React-toolkit。
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>
)
Component:
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条答案
按热度按时间0h4hbjxa1#
cartSlice
状态为:并且当Redux存储被示例化时,
cartSlice.reducer
被置于cart
属性下。UI
Cart
组件只是没有正确访问Reduxstate
。useSelector
挂钩的回调传递了*整个Redux状态对象,并且应观察嵌套属性的正确路径。state.cart
,然后state.cart.test
,或state.cart.cartItems
以获取数组,等等。