title: Redux-persist keeps on loading
body: <h3> Motivation </h3>
  
  <p>I'd like to keep user information on page refresh/redirect, but also I want to clear it after logout action.</p>
  
  <hr/>
  
  <h3> Configuration </h3>
  
  <pre class="lang-js prettyprint-override"><code>const rootReducer = combineReducers({productsReducer, auth: accessReducer, usersReducer});
  
  const persistConfig = {
      key: 'root',
      storage,
      whitelist: ['auth']
  };
  </code></pre>
  
  <p>I want to persist data only in <code>accessReducer</code> that's why it's whitelisted. Now I want to handle logout in such way that all data in reset. To do so I've created logoutReducer:</p>
  
  <h3> Logout reducer </h3>
  
  <pre class="lang-js prettyprint-override"><code>export const logout = () =&gt; ({
      type: 'USER_LOGOUT'
  });
  
  const logoutReducer = (state, action) =&gt; {
      if(action.type = 'USER_LOGOUT'){
          state = undefined;
      }
  
      return rootReducer(state, action);
  };
  </code></pre>
  
  <h3> Store and persistor </h3>
  
  <pre class="lang-js prettyprint-override"><code>const persistedReducer = persistReducer(persistConfig, logoutReducer);
  export const store = createStore(persistedReducer, applyMiddleware(thunk));
  export const persistor = persistStore(store);
  </code></pre>
  
  <hr/>
  
  <h2> PROBLEM </h2>
  
  <p>Once I run the application, I get loading information which comes from a <code>&lt;Loader/&gt;</code> in <code>PersistGate</code>:
  </p>
  
  <pre><code>&lt;Provider store={store}&gt;
      &lt;PersistGate loading={&lt;Loader/&gt;} persistor={persistor}&gt;
          ...
      &lt;/PersistGate&gt;
  &lt;/Provider&gt;
  </code></pre>
  
  <h2>POSSIBLE CAUSE</h2>
  
  <p>Now I guess it's because I pass <code>logoutReducer</code> which has only reference to other reducers and that's why configuration fails. How do I persist user information and keep that logout-clear-store trick? Is there any other solution for this? Any help would be appreciated &#9829;</p>