Проблема с настройкой Redux с помощью TypeScript при использовании нескольких типов полезных нагрузок

Question

Я пытаюсь настроить приставку с машинописью в приложении реагирования, и я не понимаю, что я делаю неправильно. Вот мои типы и создатели действий.

export type FetchFamilyListError = {
  type: typeof FETCH_FAMILY_LIST_ERROR;
  payload: string;
};

export type FetchFamilyListSuccess = {
  type: typeof FETCH_FAMILY_LIST_SUCCESS;
  payload: Family[];
};

export type FamilyActions = FetchFamilyListError | FetchFamilyListSuccess;

export const fetchFamilyListError = (error: string): types.FamilyActions => ({
  type: types.FETCH_FAMILY_LIST_ERROR,
  payload: error
});

export const fetchFamilyListSuccess = (
  families: Family[]
): types.FamilyActions => ({
  type: types.FETCH_FAMILY_LIST_SUCCESS,
  payload: families
});

А вот и редуктор.

export type familyState = {
  families: Family[];
  filters: {
    size: number;
  };
  error: string | null;
};

const initialState: familyState = {
  families: [],
  filters: {
    size: 0
  },
  error: null
};

const familyReducer = (
  state = initialState,
  action: types.FamilyActions
): familyState => {
  const actions = {
    [types.FETCH_FAMILY_LIST_ERROR]: () =>
      produce(state, draftState => {
        draftState.error = action.payload; // <--- error here
      }),
    [types.FETCH_FAMILY_LIST_SUCCESS]: () => ({
      families: [],
      filters: {
        size: 0
      },
      error: null
    }),
    default: () => state
  };
  return actions[action.type] ? actions[action.type]() : actions.default();
};

Я получаю Type 'string | Семейство [] «нельзя назначить типу» string | значение NULL'. Тип 'Family []' нельзя назначить типу 'string' Я думаю, это потому, что action.payload может быть либо строкой, либо Family [], как я могу это исправить?

Прямо сейчас я Я делаю это

draftState.error =
          typeof action.payload === "string" ? action.payload : null;

Но это не похоже на правильный способ сделать это.

Answer 1

Я полагаю, это потому, что action.payload может быть либо строкой, либо Family []

Правильно, проблема в вашем редукторе, action определяется как types.FamilyActions поэтому, когда вы пытаетесь установить draftState.error, возникает двусмысленность, потому что TS не может определить, с каким действием он имеет дело.

Учитывая, что мы знаем, какое из них будет основано на типе действия, вы можете просто разыграть полезная нагрузка для соответствующего типа, например

draftState.error = action.payload as string