Reactjs 如何使用本地存储访问合并的Redux值

因此，我最近一直在使用react/redux/django进行一个个人项目，我不得不使用

combinereduces

模块，因为我有两个reducer。我的redux“蓝图”如下所示：

authReducer: {
  IS_AUTHENTICATED:true
  AUTH_SUCCESS:true
  USERNAME:"Some User"
  TOKEN:"31d715af03390235d8e6bedd1c67e4853a365bd4"
}
roomReducer: {
  ACTIVEFRIEND: null
  ROOM: null
  ROOMS: [{}, {} ...]
}

您还应该知道，我已使用

本地存储

持久化了状态。我的问题是，我不知道如何使用

local storage.get（）

模块访问

TOKEN

状态。请记住，我使用的是来自

react redux

的

联合减速器。有人知道我问题的解决办法吗？先谢谢你

编辑

以下是我的减速机：

房间减速机

import backendTypes from "./Types";

const roomForm = {
  ACTIVEFRIEND: null,
  ROOMS: null,
  ROOM: null,
};

const roomReducer = (state = roomForm, action) => {
  switch (action.type) {
    case backendTypes.GET_ROOMS_SUCCESS:
      state["ACTIVEFRIEND"] = null;
      state["ROOMS"] = action.allRooms;
      state["ROOM"] = null;

      return state;
    case backendTypes.GET_ROOM_SUCCESS:
      state["ACTIVEFRIEND"] = action.activeFriend;
      state["ROOMS"] = localStorage.getItem("ROOMS");
      state["ROOM"] = action.activeRoom;

      return state;
    case backendTypes.GET_ROOMS_FAIL:
      state["ACTIVEFRIEND"] = null;
      state["ROOMS"] = null;
      state["ROOM"] = null;

      return state;
    case backendTypes.GET_ROOM_FAIL:
      state["ACTIVEFRIEND"] = null;
      state["ROOMS"] = localStorage.getItem("ROOMS");
      state["ROOM"] = null;

      return state;
    default:
      return state;
  }
};

export default roomReducer;

认证减速器

import authTypes from "./Types";

const authForm = {
  IS_AUTHENTICATED: false,
  AUTH_SUCCESS: false,
  USERNAME: "AnonymousUser",
  TOKEN: null,
};

const authReducer = (state = authForm, action) => {
  switch (action.type) {
    case authTypes.SIGN_IN_SUCCESS:
      state["IS_AUTHENTICATED"] = true;
      state["AUTH_SUCCESS"] = true;
      state["USERNAME"] = action.username;
      state["TOKEN"] = action.token;

      return state;
    case authTypes.SIGN_IN_FAIL:
      state["IS_AUTHENTICATED"] = false;
      state["AUTH_SUCCESS"] = false;
      state["USERNAME"] = "AnonymousUser";
      state["TOKEN"] = null;

      return state;
    case authTypes.SIGN_UP_SUCCESS:
      state["IS_AUTHENTICATED"] = true;
      state["AUTH_SUCCESS"] = true;
      state["USERNAME"] = action.username;
      state["TOKEN"] = action.token;

      return state;
    case authTypes.SIGN_UP_FAIL:
      state["IS_AUTHENTICATED"] = false;
      state["AUTH_SUCCESS"] = false;
      state["USERNAME"] = "AnonymousUser";
      state["TOKEN"] = null;

      return state;
    case authTypes.SIGN_OUT_SUCCESS:
      state["IS_AUTHENTICATED"] = false;
      state["AUTH_SUCCESS"] = false;
      state["USERNAME"] = "AnonymousUser";
      state["TOKEN"] = null;

      return state;
    case authTypes.SIGN_OUT_FAIL:
      state["IS_AUTHENTICATED"] = localStorage.getItem("IS_AUTHENTICATED");
      state["AUTH_SUCCESS"] = false;
      state["USERNAME"] = localStorage.getItem("USERNAME");
      state["TOKEN"] = localStorage.getItem("TOKEN");

      return state;
    default:
      return state;
  }
};

export default authReducer;

组合减速器

import authReducer from "./Auth/Reducer";
import roomReducer from "./Backend/Reducer";

import { combineReducers } from "redux";

const reducer = combineReducers({
  authReducer,
  roomReducer,
});

export default reducer;

index.js

...
function saveToLocalStorage(state) {
  try {
    const serialisedState = JSON.stringify(state);
    localStorage.setItem("persistantState", serialisedState);
  } catch (e) {
    console.warn(e);
  }
}

function loadFromLocalStorage() {
  try {
    const serialisedState = localStorage.getItem("persistantState");
    if (serialisedState === null) return undefined;
    return JSON.parse(serialisedState);
  } catch (e) {
    console.warn(e);
    return undefined;
  }
}

const store = createStore(
  reducer,
  loadFromLocalStorage(),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

store.subscribe(() => saveToLocalStorage(store.getState()));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
...

。。。
函数saveToLocalStorage（状态）{
试一试{
const serialisedState=JSON.stringify（state）；
setItem（“persistantState”，serialisedState）；
}捕获（e）{
控制台。警告（e）；
}
}
函数loadFromLocalStorage（）{
试一试{
const serialisedState=localStorage.getItem（“persistantState”）；
if（serialisedState==null）返回undefined；
返回JSON.parse（serialisedState）；
}捕获（e）{
控制台。警告（e）；
返回未定义；
}
}
const store=createStore(
减速器，
loadFromLocalStorage（），
窗口.\uuuuRedux\uDevTools\uuuu扩展&&window.\uuuuRedux\uDevTools\uuuu扩展（）
);
订阅（（）=>saveToLocalStorage（store.getState（））；
ReactDOM.render(
,
document.getElementById（“根”）
);
...
您可以在初始状态下直接从本地存储器获取值

initialState = {
 token: localStorage.get('token'),
 something: localStorage.get('something'),
}

你能再教我一点初始状态吗？你能展示一下你的减速器吗？您的reducer中没有初始状态吗？只是这样做了：），在questionconst store=createStore（reducer，loadFromLocalStorage，//而不是loadFromLocalStorage（）窗口的编辑部分<代码>合成（窗口.\uuuuRedux\uDevTools\uuuuuuuuuuuuu扩展）（）和窗口.\uuuuuRedux\uDevTools\uuuuuuuuuuu扩展）（）