React-redux получает различное состояние содержимого с различными действиями

Question

Мое состояние избыточности было другим, когда я go обращался к URL-адресу, используя this.props.history.pu sh ('login') и переходя непосредственно к URL-адресу, например http://localhost: 19006 / login

Это мой редуктор. js

const initialState = {
    userData: null
};  

function rootReducer(state = initialState, action) {
    if(action.type === "logout") {
        return initialState;
    } else if(action.type === "login"){
        return Object.assign({}, state, {
            userData: action.payload
        });
    }
    return state;
};

export default rootReducer;

это мое действие. js

function logout() {
    return { type: "logout" }
}

function login(payload) {
    return { type: "login", payload }
}

export {logout, login};

это мой Store.jsx

import { createStore } from "redux";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'

import rootReducer from "./Reducer";

const persistConfig = {
    key: 'root',
    storage: storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);
export { store, persistor };

Когда я вошел в систему, я храню свои userData, используя это store.dispatch(login(userData));

Но когда я получаю избыточное состояние, используя это

var loggedIn = store.getState().userData;
console.log(loggedIn)

Я получаю разные результаты, когда Я захожу на URL другим методом

Когда я go обращаюсь к URL с помощью this.props.history.pu sh ('login'), переменная loggedIn станет моими данными (это правильные данные). )

input
console.log(loggedIn)
output
{id: 1, name: "test"}

Но я go добавлю URL-адрес, вставив URL-адрес в адресную строку, переменная loggedIn станет нулевой (это неверно) пример

input
console.log(loggedIn)
output
null

Я понятия не имею, почему это произойдет, потому что буквально я получаю доступ к одному и тому же URL, но он дает другой результат.

Спасибо.

Answer 1

При перезагрузке страницы (из строки URL) вы перезагружаете контекст JavaScript. Ваше хранилище будет инициализировано так, как если бы оно было новым.

Когда вы перемещаетесь по истории API, вы сохраняете текущий JavaScript контекст выполнения, и ваше хранилище сохраняется в памяти.

I Убедитесь, что вы пытаетесь сохранить свой магазин в локальном хранилище, но, учитывая ваш вопрос, не удается сохранить или восстановить хранилище (возможно, оба).

Просмотр redux-persist инструкции, вы должны экспортировать как default функцию, которая возвращает объект, как таковой:

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}