React-redux 通過不同的動作獲得不同的 state 內容

Question

My redux state was different when I go to the URL using this.props.history.push('login') and by going directly to the URL like http://localhost:19006/login

這是我的 Reducer.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;

這是我的 Action.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 };

當我登錄時，我使用這個store.dispatch(login(userData));存儲我的 userData

但是當我得到 redux state 使用這個

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

當我使用不同的方法訪問 URL 時得到不同的結果

當我使用 this.props.history.push('login') go 到 URL 時，loggedIn 變量將成為我的數據（這是正確的）

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

But I go to URL by paste the URL in the address bar the loggedIn variable will become null (this is the wrong one) example

input
console.log(loggedIn)
output
null

我不知道為什么會發生這種情況，因為實際上我訪問的是相同的 URL 但它給出了不同的結果。

謝謝你。

Answer 1

當您重新加載頁面（從 URL 欄）時，您正在重新加載 JavaScript 上下文。 您的商店將被初始化，就好像它是新的一樣。

當您瀏覽歷史 API 時，您將保留當前的 JavaScript 執行上下文，並且您的商店保留在 memory 中。

我看到您正在嘗試將您的存儲保存在本地存儲上，但鑒於您的問題，存儲的持久性或檢索（可能兩者）都失敗了。

查看redux-persist指令，您應該default導出 function，它返回 object，如下所示：

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