title: Redux Persist - cannot read property of null (reading 'user')
body: <p>Hello everyone I am trying to build an E-commerce project using MERN but I have some difficulties with <code>redux-persist</code>.</p>
  <p>In the <code>App.jsx</code> the <code>useSelector</code> does not read the <code>user</code> from state</p>
  <pre><code>Property 'user' does not exist on type 'DefaultRootState'
  </code></pre>
  <p>Also, in <code>requestMethod</code> TOKEN does not read the <code>user</code>, it says &quot;cannot read property of null (&quot;user&quot;). Before using <code>redux-persist</code>, the register and login worked.</p>
  <p>I posted the code I think there are some bugs but if you think the problems come from somewhere else I can add those files too. Thank you!</p>
  <p>Package.json</p>
  <pre class="lang-json prettyprint-override"><code> &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;@reduxjs/toolkit&quot;: &quot;^1.6.2&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.14.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.7&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.8.3&quot;,
      &quot;axios&quot;: &quot;^0.21.4&quot;,
      &quot;json-server&quot;: &quot;^0.16.3&quot;,
      &quot;mongodb&quot;: &quot;^4.1.3&quot;,
      &quot;mongoose&quot;: &quot;^6.0.9&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-modal&quot;: &quot;^3.14.3&quot;,
      &quot;react-redux&quot;: &quot;^7.2.5&quot;,
      &quot;react-reveal&quot;: &quot;^1.2.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.3.0&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;react-stripe-checkout&quot;: &quot;^2.6.3&quot;,
      &quot;redux&quot;: &quot;^4.1.1&quot;,
      &quot;redux-devtools-extension&quot;: &quot;^2.13.9&quot;,
      &quot;redux-persist&quot;: &quot;^6.0.0&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
      &quot;reduxjs-toolkit-persist&quot;: &quot;^7.0.7&quot;,
      &quot;shortid&quot;: &quot;^2.2.16&quot;,
      &quot;styled-components&quot;: &quot;^5.3.1&quot;,
      &quot;web-vitals&quot;: &quot;^1.1.2&quot;
    },
  </code></pre>
  <p>Index.jsx</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import { store, persistor } from &quot;./redux/store&quot;;
  import { PersistGate } from 'redux-persist/integration/react'
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;PersistGate loading={null} persistor={persistor}&gt;
        &lt;App /&gt;
      &lt;/PersistGate&gt;
    &lt;/Provider&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p>App.jsx</p>
  <pre class="lang-js prettyprint-override"><code>const App = () =&gt; {
    const user = useSelector((state) =&gt; state.user.currentUser);
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            &lt;Home/&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/products/:category&quot;&gt;
            &lt;ProductList/&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/product/:id&quot;&gt;
            &lt;Product /&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/cart&quot;&gt;
            &lt;Cart/&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/success&quot;&gt;
            &lt;Success/&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/login&quot;&gt;
            {user ? &lt;Redirect to =&quot;/&quot;/&gt; : &lt;Login/&gt;}
            &lt;Login/&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/register&quot;&gt;
          {user ? &lt;Redirect to =&quot;/&quot;/&gt; : &lt;Register/&gt;}
  </code></pre>
  <p>state.user</p>
  <pre><code>Object
  cart:
  products: []
  quantity: 0
  total: 0
  [[Prototype]]: Object
  user:
  currentUser: {_id: '616001631a1375942f6d7dd9', username: 'admin', email: 'admin@gmail.com', isAdmin: true, createdAt: '2021-10-08T08:29:23.827Z', …}
  error: false
  isFetching: false
  [[Prototype]]: Object
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  __proto__: (...)
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
  _persist:
  rehydrated: true
  version: 1
  [[Prototype]]: Object
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  __proto__: (...)
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
  [[Prototype]]: Object
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  __proto__: (...)
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
  </code></pre>
  <p>Store.js</p>
  <pre class="lang-js prettyprint-override"><code>import { configureStore, combineReducers } from &quot;@reduxjs/toolkit&quot;;
  import cartReducer from &quot;./cartRedux&quot;;
  import userReducer from &quot;./userRedux&quot;;
  import {
      persistStore,
      persistReducer,
      FLUSH,
      REHYDRATE,
      PAUSE,
      PERSIST,
      PURGE,
      REGISTER,
  } from &quot;redux-persist&quot;;
  import storage from &quot;redux-persist/lib/storage&quot;;
  
  
  const persistConfig = {
      key: &quot;root&quot;,
      version: 1,
      storage,
  };
  
  const rootReducer = combineReducers({ user: userReducer, cart: cartReducer })
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  
  export const store = () =&gt; configureStore({
      reducer:
          persistedReducer,
      middleware: (getDefaultMiddleware) =&gt;
          getDefaultMiddleware({
              serializableCheck: {
                  ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
              },
          })
  })
  
  
  export let persistor = persistStore(configureStore);
  
  </code></pre>
  <p>requestMethods.js</p>
  <pre class="lang-js prettyprint-override"><code>import axios from &quot;axios&quot;;
  
  const BASE_URL = &quot;http://localhost:5000/api/&quot;;
  const TOKEN =
      JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user).currentUser
          .accessToken || &quot;&quot;;
  
  export const publicRequest = axios.create({
      baseURL: BASE_URL,
  });
  
  export const userRequest = axios.create({
      baseURL: BASE_URL,
      header: { token: `Bearer ${TOKEN}` },
  });
  </code></pre>
  <p>User Redux</p>
  <pre class="lang-js prettyprint-override"><code>import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  const userSlice = createSlice({
      name: &quot;user&quot;,
      initialState: {
          currentUser: null,
          isFetching: false,
          error: false,
      },
      reducers: {
          loginStart: (state) =&gt; {
              state.isFetching = true;
          },
          loginSuccess: (state, action) =&gt; {
              state.isFetching = false;
              state.currentUser = action.payload;
          },
          loginFailure: (state) =&gt; {
              state.isFetching = false;
              state.error = true;
          },
      },
  });
  
  export const { loginStart, loginSuccess, loginFailure } = userSlice.actions;
  export default userSlice.reducer;
  </code></pre>