title: How to configure redux-persist with redux-toolkit?
body: <p>I have configured redux-persist with a traditional react-redux setup like this:</p>
  <pre><code>onst persistConfig = {
    key: 'root',
    storage,
    whitelist: ['todos'],
  };
  
  const persistedReducer = persistReducer(persistConfig, reducer);
  
  const store = createStore(
    persistedReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  
  const persistor = persistStore(store);
  
  // wrapper
  const StateProvider = ({ children }) =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate loading={&lt;div&gt;Loading...&lt;/div&gt;} persistor={persistor}&gt;
          {children}
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  <p>But, how can I configure it with redux-toolkit?
  So far I have tried this:</p>
  <pre><code>const persistedReducer = persistReducer(persistConfig, todoreducer);
  const store = configureStore({
    reducer: {
      todos: persistedReducer,
    },
  });
  
  const persistor = persistStore(store);
  
  // wrapper
  const StateProvider = ({ children }) =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate loading={&lt;div&gt;Loading...&lt;/div&gt;} persistor={persistor}&gt;
          {children}
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  <p>But, It is not working. I can't get the <code>todos</code> by  <code>const todos = useSelector(state =&gt; state.todos);</code></p>
  <p>it returns undefined.</p>