Question

我使用带有登录页面和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)))

Answer 1

尝试将值存储在本地存储中，并且在页面加载时从本地存储获取值。如果您还有其他值，则应使用redux进行数据存储。

Answer 2

在使用 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 3

这不是问题，而是它的工作方式。刷新时，整个应用程序构建将从头开始。

但是要在刷新后保留存储，您可以使用这些redux中间件-

redux-persist或
redux-storage

React-页面刷新后如何使状态持久化？

3 个答案: