Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

useReducer – Enforce only one true value without explicitly setting others false?

I’m looking for a smarter way to enforce
one value true, setting the others to false

This Python q&a suggests an enum
(I’m not familiar with either)

I can already

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

switch (action.type) {
        case 'loadCurrent':
         return {...state, 
loadCurrent: true, 
loadPrev: false, etc ...};

But this is a lot of boilerplate and intuition (as well as that linked python question) tell me there’s a more elegant solution.

function reducer (state, action) {
  switch (action.type) {
    case 'loadCurrent':
      return {...state, loadCurrent: true};
    case 'fetchNew':
      return {...state, fetchNew: true};
    case 'loadPrevHook':
      return {...state, loadPrevHook: true };
    case 'loadNextHook':
      return {...state, loadNextHook: true };
    case 'loaded':
      return {...state, loaded: true };
  }
}


 const initialState = { 
loadCurrent: false,
fetchNew: false, 
loadPrevHook: false, 
loadNextHook: false, 
loaded: true }

>Solution :

Having separate properties for these doesn’t make the most sense. Put all the data into a single property instead – perhaps call it loadStage or whatever you think is appropriate.

If, as the code here suggests, the state doesn’t have any other properties, just setting the action.type looks like it’d do.

function reducer (state, action) {
  return { loadStage: action.type };
}

If you expanded the reducer to include other actions as well not related to the loading actions, you could make an array corresponding to the loading actions.

const loadStageActions = ['loadCurrent', 'fetchNew', 'loadPrevHook', 'loadNextHook', 'loaded'];
function reducer (state, action) {
  if (loadStageActions.includes(action.type)) {
    return { ...state, loadStage: action.type };
  }
  // implement other logic here
}

Then, in the rest of your code, just check the one string property instead of the multiple booleans. Eg instead of doing state.loadCurrent, do state.loadStage === 'loadCurrent'.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading