i'm calling two dispatch's, but one resets the state of other.

i’m calling two dispatch’s, but one reset’s do state of the other, how can i call more than one dispatch’s of without reset any state? what am i doing wrong?

My customHook:

export type Action =
  | { type: 'START_FETCH_PAYLOADS' }
  | {
    type: 'FINISH_FETCH_PAYLOADS';
    microMonthlyPayloads: [];
    macroMonthlyPayloads: [];
    microDailyPayloads: [];
    macroDailyPayloads: [];
    selectedDevicePayload: [];
  }
  | { type: 'ERROR_FETCH_PAYLOADS' };

export const usePayloadsReducer: Reducer<State, Action> = (state, action) => {
  switch (action.type) {
    case 'START_FETCH_PAYLOADS':
      return {
        ...state,
        loading: true,
      };
    case 'FINISH_FETCH_PAYLOADS':
      return {
        ...state,
        loading: false,
        microMonthlyPayloads: action.microMonthlyPayloads,
        macroMonthlyPayloads: action.macroMonthlyPayloads,
        microDailyPayloads: action.microDailyPayloads,
        macroDailyPayloads: action.macroDailyPayloads,
        selectedDevicePayload: action.selectedDevicePayload,
      };
    case 'ERROR_FETCH_PAYLOADS':
      return {
        ...state,
        loading: false,
      };
    default:
      throw new Error('unknown action type');
  }
};

  const initialState: State = {
    microMonthlyPayloads: [],
    macroMonthlyPayloads: [],
    microDailyPayloads: [],
    macroDailyPayloads: [],
    selectedDevicePayload: [],
    loading: true,
  };

const asyncActionHandlers: AsyncActionHandlers<Reducer<State, Action>, AsyncAction> = {
    FETCH_PAYLOADS:
      ({ dispatch }) =>
      async (action) => {
        dispatch({ type: 'START_FETCH_PAYLOADS' });

        try {
          switch (action.filter) {
            case 'PAYLOADS_OF_SELECTED_DEVICE': {

             //fetching and formatting data...

              dispatch({
                type: 'FINISH_FETCH_PAYLOADS',
                ...state,
                selectedDevicePayload: formattedDevice
              });

              break; 
                case 'MICRO_AND_MACRO_BY_MONTH': {
              
              //fetching and formatting data...

              dispatch({
                type: 'FINISH_FETCH_PAYLOADS',
                ...state,
                microMonthlyPayloads: monthlyMicroResponse.data[0],
                macroMonthlyPayloads: monthlyMacroResponse.data[0],

              });

              break;
            
            }
             default:
               return state;
            }
          } catch (e) {
            dispatch({ type: 'ERROR_FETCH_PAYLOADS' });
          }
        },

on my component:

const getPayloads = useCallback(() => {

    dispatch({
      type: 'FETCH_PAYLOADS',
      filter: 'PAYLOADS_OF_SELECTED_DEVICE',
    });

    dispatch({
      type: 'FETCH_PAYLOADS',
      filter: 'MICRO_AND_MACRO_BY_MONTH',
    });

  }, []);

  useEffect(() => {

      getPayloads();

  }, [getPayloads]); 
  

[eduardomarr]

ok @dai-shi, got it! thank you!!

[dai-shi]

It will overwrite. Note that this library doesn’t do anything special in terms of its behavior. It’s more or less a syntax sugar. It works exactly like you put async logic in your callback (where you call dispatch).