'Hook useReducer only working once when called several times

I have a useReducer hook that I call

Here is how it's implemented

const [localFiltersBrandsAndModels, changeBrandsAndModels] = useReducer(
    (state, action) => {
      return { ...state, [selectedTab]: action.payload };
    },
    {
      car: filterBrandsAndModels,
      motorcycle: filterMotorcycleBrandsAndModels,
    }
  );

and when dispatching

const setModelSelected = (brandKey, modelKey, value) => {
    changeBrandsAndModels({
      payload: {
        ...localFiltersBrandsAndModels[selectedTab],
        [brandKey]: {
          ...localFiltersBrandsAndModels[selectedTab][brandKey],
          models: {
            ...localFiltersBrandsAndModels[selectedTab][brandKey].models,
            [modelKey]: {
              ...localFiltersBrandsAndModels[selectedTab][brandKey].models[
                modelKey
              ],
              isSelected: value,
            },
          },
        },
      },
    });
  };

When I log data in the reducer it's called correctly (8 times) but localFiltersBrandsAndModels is changed only once and the end result in once changes.

WHat is the problem here ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source