Question

当我使用this.props.history.push（'login'）进入URL并直接进入http://localhost:19006/login

这样的URL时，我的redux状态有所不同。

这是我的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 };

登录时，我使用此存储userData store.dispatch(login(userData));

但是当我使用它获得redux状态

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

使用其他方法访问URL时会得到不同的结果

当我使用this.props.history.push（'login'）转到URL时，loginIn变量将成为我的数据（这是正确的数据）

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

但是我通过将URL粘贴到地址栏中来访问URL，loggedIn变量将变为null（这是错误的） example

input
console.log(loggedIn)
output
null

我不知道为什么会发生这种情况，因为从字面上看我访问相同的URL，但结果却不同。

谢谢。

Answer 1

当您重新加载页面（从URL栏）时，您正在重新加载JavaScript上下文。您的商店将被初始化为新商店。

在浏览历史记录API时，您将保留当前的JavaScript执行上下文，并且将存储区保留在内存中。

我看到您正在尝试将您的商店持久存储在本地存储中，但是鉴于您的问题，商店的持久性或检索（也许两者都失败了）。

看看redux-persist指令，您应该将一个返回对象的函数作为default导出，例如：

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

React-redux通过不同的动作获得不同的状态内容

1 个答案: