title: React - How to get current state values in custom hooks with redux-toolkit?
body: <p>I've got a question. I have a custom hook like this:</p>
  <pre><code>import { isNullOrUndefined } from '../../../../../../utils/utils';
  import { useSelector } from 'react-redux';
  
  export const useGoodsSetupWizardController = () =&gt; {
      const productSetupWizard = useSelector((state) =&gt; state.productSetupWizard.value);
  
      function isNextButtonDisabled() {
          let returnValue = false;
          switch(productSetupWizard?.step) {
              case 2:
                  if(isNullOrUndefined(productSetupWizard?.product?.productName) || productSetupWizard?.product?.productName.trim().length === 0) {
                      returnValue = true;
                  }
          }
          return returnValue;
      }
  
      return {
          isNextButtonDisabled,
      };
  }
  </code></pre>
  <p>As you can see I'm using <code>useSelector</code> to get the current value of <code>productSetupWizard</code>.
  In my other components and hooks all is working fine using this way.
  The slice is this one here:</p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit';
  
  const initialState = {
    value: { 
      step: 1, 
      product: null 
    },
  };
  
  export const productSetupWizardSlice = createSlice({
    name: 'productSetupWizard',
    initialState,
    reducers: {
      setProductSetupWizard: (state, action) =&gt; {
        state.value = action.payload
      },
      increaseStep: (state, action) =&gt; {
        state.value.step++;
      },
      decreaseStep: (state, action) =&gt; {
        state.value.step--;
      }
    },
  });
  
  export const { setProductSetupWizard, increaseStep, decreaseStep } = productSetupWizardSlice.actions;
  
  export default productSetupWizardSlice.reducer;
  </code></pre>
  <p>I don't know if you need to see the store file here to answer my question. If so, please let me know. I will add them to my question then.
  The question I have, it seems not be working in a custom hook like the code above.
  It gives me always the initial value of <code>productSetupWizard</code> and not updates on it.</p>
  <p>Is it because the custom hook is initialized once on the component body with the initial value of <code>productSetupWizard</code>?</p>
  <p>So my question is, is there any special usage in custom hooks necessary to get the state values from React-redux (toolkit)?</p>
  <p>So the value of productSetupWizard in method isNextButtonDisabled() is always the initial value:</p>
  <pre><code> value: { 
          step: 1, 
          product: null 
        },
  </code></pre>
  <p>Here is the complete way of importing the different custom hooks I use in my project.
  I have a hook called <code>ProductSetupWizard</code>. This is my UI. This ProductSetupWizard is importing the function <code>getController</code> from the custom hook called <code>useProductTypeSetupWizard</code>:</p>
  <pre><code>import { useProductTypeSetupWizard } from '../../../../factories/productSetup.factory';
  
  function ProductSetupWizard(props) {
      const [productSetupController, setProductSetupController] = useState(null);
      ...
      const { getController } = useProductTypeSetupWizard();
      ...
      
      useEffect(() =&gt; {
              setProductSetupController(getController(productTypeId));
      },[productTypeId]);
     
      return (
          &lt;&gt;
          ...
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>The <code>useProductTypeSetupWizard</code> hook is loading and returning the <code>useGoodsSetupWizardController</code> depending on the given <code>productTypeId</code>:</p>
  <pre><code>import { isNullOrUndefined } from &quot;../utils/utils&quot;;
  import { useGoodsSetupWizardController } from '../components/managementInterface/shop/tabs/productSetupWizard/setups/goodsSetupWizard.controller';
  
  export const useProductTypeSetupWizard = () =&gt; {
      const {
          getComponentGoodsController,
          isNextButtonDisabledGoodsController,
          needsNextStepToBeSkippedGoodsController
      } = useGoodsSetupWizardController();
  
      function getController(productTypeId) {
          if(isNaN(parseInt(productTypeId))) {
              return null;
          }
          switch(parseInt(productTypeId)) {
              case 1:
                  return {
                      getComponent: getComponentGoodsController,
                      isNextButtonDisabled: isNextButtonDisabledGoodsController,
                      needsNextStepToBeSkipped: needsNextStepToBeSkippedGoodsController
                  };
              case 3:
                  //apply like useGoodsSetupWizardController
          }
      }
  
      return { 
          getController
      };
  }
  </code></pre>