时间戳

首页 > 解决方案 > React-redux 通过不同的动作获取不同的状态内容

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

问题描述

当我使用 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 时，loggedIn 变量将成为我的数据（这是正确的）

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

但是我通过在地址栏中粘贴 URL 来访问 URL，loggedIn 变量将变为空（这是错误的） 示例

input
console.log(loggedIn)
output
null

我不知道为什么会发生这种情况，因为实际上我访问的是相同的 URL，但它给出了不同的结果。

谢谢你。

标签： javascriptreact-nativereduxreact-redux

解决方案

当您重新加载页面（从 URL 栏）时，您正在重新加载 JavaScript 上下文。您的商店将被初始化，就好像它是新的一样。

当您通过 History API 导航时，您会保留当前的 ​​JavaScript 执行上下文，并且您的存储会保留在内存中。

我看到您正在尝试将您的存储保存在本地存储上，但鉴于您的问题，存储的持久性或检索（可能两者）都失败了。

查看redux-persist说明，您应该导出为default一个函数，该函数返回一个对象，如下所示：

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

推荐阅读