title: Having error destructring a value from redux state
body: <p>I am having error while trying to get my redux state value. This is my redux store configuration below</p>
  <p>index.js</p>
  <pre><code>import { Provider } from 'react-redux';
  import store from './redux/store';
  import { PersistGate } from 'redux-persist/integration/react';
  import { persistStore } from 'redux-persist';
  
  
  let persistor = persistStore(store);
  
  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('root'));
  </code></pre>
  <p>store.js</p>
  <pre><code>import loginReducer from './reducers/auth.slice';
  
  const reducers = combineReducers({
    login: loginReducer,
  });
  
  const persistConfig = {
    key: 'root',
    storage,
  };
  
  const persistedReducer = persistReducer(persistConfig, reducers);
  
  const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk],
  });
  
  export default store;
  </code></pre>
  <p>auth.slice.js</p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit';
  
  const initialState = {
    isLoading: false,
  };
  
  const loginSlice = createSlice({
    name: 'login',
    initialState,
    reducers: {
      pending: (state) =&gt; {
        state.isLoading = true;
      },
    },
  });
  
  const { actions, reducer } = loginSlice;
  
  export const {
    pending,
  } = actions;
  
  export default reducer;
  </code></pre>
  <p>When I then try to use <code>isLoading</code> like this</p>
  <pre><code>const { isLoading } = useSelector(state =&gt; state.login);
  </code></pre>
  <p>I get this error below</p>
  <pre><code>×
  TypeError: Cannot destructure property 'isLoading' of 'Object(...)(...)' as it is undefined.
  </code></pre>
  <p>Please what am I doing wrong?</p>