title: How to toggle React component using redux toolkit
body: <p>I am trying to toggle (show/hide) react component with redux toolkit but i can not get the value of &quot;toggle&quot;,redux toolkit useSelector is not working. it showing &quot;undefined&quot;.</p>
  <p><strong>this code is not working.please put your suggestion about my mistakes.i need your help..please help me.</strong>
  <a href="https://i.stack.imgur.com/JhSZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JhSZw.png" alt="enter image description here" /></a>
  <strong>index.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom/client&quot;;
  import &quot;./index.css&quot;;
  import App from &quot;./App&quot;;
  import { store, persistor } from &quot;./app/store.js&quot;;
  import { PersistGate } from &quot;redux-persist/integration/react&quot;;
  import { Provider } from 'react-redux';
  const root = ReactDOM.createRoot(document.getElementById(&quot;root&quot;));
  root.render(
    &lt;React.StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;PersistGate persistor={persistor} loading={null}&gt;
        &lt;App /&gt;
      &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;
  );
  
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import './App.css';
  import ToggleButton from './components/ToggleButton/ToggleButton';
  import ToggleExample from './components/ToggleExample/ToggleExample';
  
  function App() {
    return (
      &lt;div className='example'&gt;
        &lt;ToggleExample/&gt;
        &lt;ToggleButton/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>toggleSlice.js</strong></p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit'
  const initialState = {
      toggle: false
  }
  export const toggleSlice = createSlice({
      name: 'toggleSidebar',
      initialState,
      reducers: {
          toggleVisible: (state) =&gt; {
              state.toggle = false
              console.log(&quot;state.toggle 1&quot;,state.toggle)
          },
          toggleInvisible: (state) =&gt; {
              state.toggle = true
              console.log(&quot;state.toggle 2&quot;,state.toggle)
          },
      }
  })
  export const { 
    toggleVisible, 
    toggleInvisible
   } = toggleSlice.actions;
   export const selectToggle = (state) =&gt; state.toggle;
  export default toggleSlice.reducer;
  </code></pre>
  <p><strong>store.js</strong></p>
  <pre><code>import { configureStore } from '@reduxjs/toolkit'
  import toggleSlice from '../feature/toggleSlice'
  import storage from 'redux-persist/lib/storage'
  import {
    persistReducer, persistStore, FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from 'redux-persist'
  
  const persistConfig = {
    key: 'root',
    storage,
  }
  const persistedReducer = persistReducer(persistConfig, toggleSlice)
  
  
  export const store = configureStore({
    reducer: {
      persistedReducer
    },
    middleware: (getDefaultMiddleware) =&gt;
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
  })
  
  export const persistor = persistStore(store)
  </code></pre>
  <p><strong>ToggleButton.js</strong></p>
  <pre><code>import React from 'react'
  import { useDispatch,useSelector } from 'react-redux';
  import { toggleVisible,toggleInvisible, selectToggle } from '../../feature/toggleSlice';
  import './ToggleButton.css'
  const ToggleButton = () =&gt; {
    const dispatch = useDispatch();
    const  toggle  = useSelector(selectToggle)
    console.log(toggle)  
    const handleToggle = () =&gt; { 
     { toggle ?  dispatch(toggleVisible()) : dispatch(toggleInvisible()) }
  }
  
    return (
      &lt;div className='toggle-button-div'&gt;
      &lt;button className='toggle-button' onClick={() =&gt; handleToggle()}&gt;toggle&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  export default ToggleButton
  </code></pre>
  <p><strong>ToggleExample.js</strong></p>
  <pre><code>import React from 'react'
  import './ToggleExample.css';
  const ToggleExample = () =&gt; {
    return (
      &lt;div className='toggle-example'&gt;
      &lt;ul&gt;
          &lt;li className='list-style'&gt;Home&lt;/li&gt;
          &lt;li className='list-style'&gt;About&lt;/li&gt;
          &lt;li className='list-style'&gt;Contact&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
    )
  }
  
  export default ToggleExample
  </code></pre>