title: React Redux Toolkit: TypeError: Cannot read property 'value' of undefined
body: <p>In my project I have implemented React Redux toolkit for 2 different states scenarios and they work perfectly. Now I needed to implement a 3rd state scenario for Redux, so I've followed the same pattern as for the first 2. Inspired from: <a href="https://react-redux.js.org/tutorials/quick-start" rel="nofollow noreferrer">https://react-redux.js.org/tutorials/quick-start</a></p>
  <p>My 3rd state scenario has the following slice declaration:</p>
  <pre><code>import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  export const betsSlice = createSlice({
    name: &quot;bets&quot;,
    initialState: { value: { betsLeft: 0, betToBet: 0, usersBets: &quot;&quot; } },
    reducers: {
      updateBets: (state, action) =&gt; {
        state.value = action.payload;
      },
    },
  });
  
  export const { updateBets } = betsSlice.actions;
  
  /**
   * Exporting to avoid boilerplate like:
   * const count = useSelector((state) =&gt; state.counter.value)
   */
  export const getBets = (state) =&gt; state.bets.value;
  
  export default betsSlice.reducer;
  
  </code></pre>
  <p>The store.js:</p>
  <pre><code>import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import themeModeReducer from &quot;../features/themeMode/themeModeSlice&quot;;
  import liveGeneralStatisticsReducer from &quot;../features/liveGeneralStatistics/liveGeneralStatisticsSlice&quot;;
  import betsReducer from &quot;../features/bets/betsSlice&quot;;
  
  export default configureStore({
    reducer: {
      themeMode: themeModeReducer,
      liveGeneralStatistics: liveGeneralStatisticsReducer,
      betsReducer: betsReducer,
    },
  });
  
  </code></pre>
  <p>And in the component I'm calling at the beginning, as usually:</p>
  <pre><code>const betsRedux = useSelector(getBets);
  </code></pre>
  <p>But, unexpectedly, on render, I get:
  <strong>TypeError: Cannot read property 'value' of undefined</strong></p>
  <p>Pointing at:</p>
  <pre><code>  16 |  * Exporting to avoid boilerplate like:
    17 |  * const count = useSelector((state) =&gt; state.counter.value)
    18 |  */
  &gt; 19 | export const getBets = (state) =&gt; state.bets.value;
    20 | 
    21 | export default betsSlice.reducer;
    22 | 
  </code></pre>
  <p>I don't understand why is this happening, given that we have the initialState setup.</p>
  <p>What would be the way to solve this, please?</p>