How to use local storage to access combined reducer values React-Redux

Question

So I have been working on a personal project lately with react/redux/django and I had to use combine reduces modules because I have 2 reducers. My redux "blueprint" looks something like this:

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

also you should know that I have persisted the state using local storage. My problem is that I do not know how to access for example the TOKEN state using local storage.get() module. Keep in mind that I am using combine reducers from react-redux. Does anyone know the solution to my problem? Thank you in advance.

Edit

Here are my reducers:

ROOM REDUCER

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;

AUTH REDUCER

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;

COMBINED REDUCER

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")
);
...

Jemy Jenesh Jemy Jenesh · Accepted Answer · 2021-05-30T10:50:10

You can get value from the local storage directly in your initial state.

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

How to use local storage to access combined reducer values React-Redux

1 Answers