时间戳

首页 > 解决方案 > React-如何在页面刷新后使状态持续存在？

reactjs - React-如何在页面刷新后使状态持续存在？

问题描述

我使用带有登录页面和 perfil 页面的 React.js 制作了一个单页面应用程序。一切正常，但最近我注意到刷新页面时，所有状态都是空的。请有人可以告诉我如何解决这个问题，我的意思是导入什么库以及在哪里添加它

我的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';


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;

和我的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) => {


    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)))

标签： reactjsreact-reduxreact-router

解决方案

在使用redux-persist时使用此配置。这是我的配置，只需根据您的需要更改main app、reducers和actions即可。

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

推荐阅读