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