Реакция - Как сделать так, чтобы состояния сохранялись после обновления страницы sh?

Question

Я создал одностраничное приложение, используя React. js со страницей входа и страницей. Все работает хорошо, но в последнее время Я заметил, когда refre sh моей страницы, все состояния пусты . Пожалуйста, кто-то может сказать мне, как решить эту проблему, я имею в виду, что библиотека импорта и куда добавить его

мой индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.jsx';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

это мой App.jsx

import React from 'react'; 
import '../App.css'; 
import AppRoutes from './AppRoutes'; 
import  { Provider }  from "react-redux";
import store from '../redux/store' 


store.dispatch(getTallerList())

const App = () => (
    <Provider store={store}>

        <AppRoutes />

    </Provider>   )

export default App;

и мой магазин. 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) => {


    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 default createStore(combineReducers({cartReducer, coursesReducer, userReducer}), composeWithDevTools(applyMiddleware(thunk)))

Answer 1

Используйте эту конфигурацию, как вы используете redux-persist . Это моя конфигурация, просто измените основное приложение , редукторы и действия в соответствии с вашими потребностями.

import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './MyApp';
import {Provider} from 'react-redux';
import {applyMiddleware, createStore} from "redux";
import allReducers from './reducers/index';
import {persistReducer, persistStore} from 'redux-persist';
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, allReducers);

let store = createStore(persistedReducer, applyMiddleware(thunk));
let persistor = persistStore(store);

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

Обновлено: вы можете сделать это

import {combineReducers} from "redux";
import Users from './load-user';



const allReducers = combineReducers({
    users: Users,
})

export default allReducers

Answer 2

Это не проблема, это то, как это работает. При обновлении sh все приложение снова создается с нуля.

Но для сохранения магазина после обновления sh вы можете использовать эти redux middlewares -

1. redux-persist или
2. избыточное хранилище

Answer 3

Попробуйте сохранить значение в локальном хранилище и во время загрузки страницы получить значение из локального хранилища. Если у вас есть еще несколько значений, вы должны использовать избыточность для хранения данных.