问题
I made a SPA with React.js using PersisGate for states to persists but the states dont save after refresh the page. Also i see the LocalStorage at the Application tab (Chrome) and i can see the arrays of initialCart, initialCourses, initialUsers emptys but when i change the states at the pages those arrays that i can see at the LocalStorage stills empty. You can see my code bellow
this is index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.jsx';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import {applyMiddleware, combineReducers, createStore} from "redux";
import {persistReducer, persistStore} from 'redux-persist';
import {rootReducer} from './redux/store'
import {PersistGate} from 'redux-persist/integration/react';
import storage from 'redux-persist/lib/storage';
import thunk from "redux-thunk";
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
let store = createStore(persistedReducer, applyMiddleware(thunk));
let persistor = persistStore(store);
ReactDOM.render(<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>, document.getElementById('root'));
store.js
import { applyMiddleware, combineReducers, createStore } from 'redux'
import { ADD_TO_CART, GET_COURSE_LIST, USUARIO_LOGIN } from './action'
import { composeWithDevTools } from 'redux-devtools-extension'
import { persistStore, persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'
const initialCart = {
cart:[]
}
const initialCourses ={
courses:[]
}
const initialUser ={
user:{}
}
const cartReducer = ( state = initialCart,action) => {
console.log(action)
if(action.type===ADD_TO_CART)
{
if(state.cart.find(c=>c===action.id))
{
return state
}
return{
...state,
cart: state.cart.concat(action.id),
}
}
return state
}
const coursesReducer = (state=initialCourses, action) =>{
console.log(action)
if(action.type === GET_COURSE_LIST){
return {
...state,
courses: action.courses
}
}
return state
}
const userReducer = (state=initialUser, action)=>{
console.log(action)
if(action.type === USER_LOGIN){
return {
...state,
user: action.user
}
}
return state
}
export const rootReducer = combineReducers({cartReducer, coursesReducer, userReducer})
const storage = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
export default storage
App.jsx
import React from 'react';
import '../App.css';
import AppRoutes from './AppRoutes';
import { Provider } from "react-redux"
import store from '../redux/store'
import { getCoursesList } from '../redux/actionCreators'
import { PersistGate } from 'redux-persist/integration/react'
import {createStore} from 'redux'
store.dispatch(getCoursesList())
const App = () => (
<Provider store={store}>
<AppRoutes />
</Provider>
)
export default App;
来源:https://stackoverflow.com/questions/60749410/react-the-states-dont-persits-after-refresh-the-page