Состояние очищается при перезагрузке страницы
Я создаю веб-сайт, используя Django и React, и только что понял, что у меня есть эта проблема.
В принципе, каждый раз, когда я вхожу на свою страницу, не обновляя ее, все в порядке, состояние сохраняется, и пользователь остается под своим логином. Моя функциональность выхода из системы также работает нормально, всякий раз, когда мне нужно выйти из системы, состояние очищается, локальное хранилище очищается и все в порядке. Проблема возникает, когда я перезагружаю страницу. Когда я это делаю, мое локальное хранилище сохраняется, а состояние - нет. Я не могу найти способ решить эту проблему.
export const login = (email, password) => async (dispatch) => {
try {
dispatch({
type: USER_LOGIN_REQUEST,
});
const config = {
headers: {
"Content-type": "application/json",
},
};
const { data } = await axios.post(
"/api/users/login/",
{ username: email, password: password },
config
);
dispatch({
type: USER_LOGIN_SUCCESS,
payload: data,
});
localStorage.setItem("userInfo", JSON.stringify(data));
} catch (error) {
dispatch({
type: USER_LOGIN_FAIL,
payload:
error.response && error.response.data.detail
? error.response.data.detail
: error.message,
});
}
};
export const logout = () => (dispatch) => {
localStorage.removeItem("userInfo");
dispatch({ type: USER_LOGOUT });
dispatch({ type: USER_DETAILS_RESET });
dispatch({ type: ORDER_LIST_MY_RESET });
dispatch({ type: USER_LIST_RESET });
};
Вот мои действия по входу и выходу из системы.
Вот мой редуктор:
export const userLoginReducer = (state = {}, action) => {
switch (action.type) {
case USER_LOGIN_REQUEST:
return { loading: true };
case USER_LOGIN_SUCCESS:
console.log(action);
return { loading: false, userInfo: action.payload };
case USER_LOGIN_FAIL:
return { loading: false, error: action.payload };
case USER_LOGOUT:
return {};
default:
return state;
}
};
А это мой store.js:
import { combineReducers, applyMiddleware, createStore } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import {
productListReducer,
productDetailsReducer,
} from "./reducers/productReducers";
import { cartReducer } from "./reducers/cartReducers";
import {
userDetailsReducer,
userListReducer,
userLoginReducer,
userRegisterReducer,
userUpdateProfileReducer,
} from "./reducers/userReducers";
import {
orderCreateReducer,
orderDetailsReducer,
orderPayReducer,
orderListMyReducer,
} from "./reducers/orderReducers";
const reducers = combineReducers({
productList: productListReducer,
productDetails: productDetailsReducer,
cart: cartReducer,
userLogin: userLoginReducer,
userRegister: userRegisterReducer,
userDetails: userDetailsReducer,
userUpdateProfile: userUpdateProfileReducer,
usersList: userListReducer,
orderCreate: orderCreateReducer,
orderDetails: orderDetailsReducer,
orderPay: orderPayReducer,
orderListMy: orderListMyReducer,
});
const cartItemsFromStorage = localStorage.getItem("cartItems")
? JSON.parse(localStorage.getItem("cartItems"))
: [];
const userInfoFromStorage = localStorage.getItem("userInfo")
? JSON.parse(localStorage.getItem("userInfo"))
: null;
const shippingAddressFromStorage = localStorage.getItem("shippingAddress")
? JSON.parse(localStorage.getItem("shippingAddress"))
: {};
const initialState = {
cart: {
cartItems: cartItemsFromStorage,
shippingAddress: shippingAddressFromStorage,
},
userLogin: { userInfo: userInfoFromStorage },
};
const middleware = [thunk];
const store = configureStore(
{ reducer: reducers },
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
Я читал о сохранении состояния с помощью URL, но я не смог понять, как использовать это в моем сценарии. Я не понимаю, как вернуть информацию из локального хранилища обратно в хранилище Redux после перезагрузки.