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

Question

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

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 }

I forgot to mention another even greater motivation besides syntax/boilerplate… having mutually exclusive load states, so that a bug isn’t accidentally introduced which perhaps fetches and renders two different items at a time… — Zach_is_my_name, Jul 09 '22 at 18:27

score 2 · Accepted Answer · answered Jul 09 '22 at 18:21

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'.

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

1 Answers1