TypeScript

[Error] addCase cannot be called with two reducers for the same action type

옝옹 2023. 11. 23. 14:50
[Error]
addCase cannot be called with two reducers for the same action type

특정 페이지에 리덕스 툴킷을 만지다 이러한 에러가 떴다

 

[에러가 난 코드]

const initialState: RandomState = {
  randomInput: {
    loading: false,
    data: {
      cuid: "",
      result: "",
      type: "",
    },
    error: null,
  },
  randomRecInput: {
    loading: false,
    data: {
      cuid: "",
      result: "",
      type: "",
    },
    error: null,
  },
};

const randomSlice = createSlice({
  name: RANDOM,
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(
        `${randomInputAsyncAction.fetchRandomInput.request}`,
        (state) => {
          state.randomInput.loading = true;
        }
      )
      .addCase(
        `${randomInputAsyncAction.fetchRandomInput.success}`,
        (
          state,
          action: PayloadAction<{ randomInput: RandomInputResponse }>
        ) => {
          state.randomInput.loading = false;
          state.randomInput.data = action.payload.randomInput;
        }
      )
      .addCase(
        `${randomInputAsyncAction.fetchRandomInput.failure}`,
        (state, action: PayloadAction<APIError>) => {
          state.randomInput.loading = false;
          state.randomInput.data = initialState.randomInput.data;
          state.randomInput.error = action.payload;
        }
      )
      .addCase(
        `${randomInputAsyncAction.fetchRandomRecInput.request}`,
        (state) => {
          state.randomRecInput.loading = true;
        }
      )
      .addCase(
        `${randomInputAsyncAction.fetchRandomRecInput.success}`,
        (
          state,
          action: PayloadAction<{ randomInput: RandomInputResponse }>
        ) => {
          state.randomRecInput.loading = false;
          state.randomRecInput.data = action.payload.randomInput;
        }
      )
      .addCase(
        `${randomInputAsyncAction.fetchRandomRecInput.failure}`,
        (state, action: PayloadAction<APIError>) => {
          state.randomRecInput.loading = false;
          state.randomRecInput.data = initialState.randomInput.data;
          state.randomRecInput.error = action.payload;
        }
      );
  },
});

const randomInputSelector = (state: RootState) => state[RANDOM].randomInput;
const randomRecInputSelector = (state: RootState) =>
  state[RANDOM].randomRecInput;

export const RandomInputSelector = {
  loading: createSelector(
    randomInputSelector,
    (randomInput) => randomInput.loading
  ),
  data: createSelector(randomInputSelector, (randomInput) => randomInput.data),
  error: createSelector(
    randomInputSelector,
    (randomInput) => randomInput.error
  ),
};

export const RandomInputRecSelector = {
  loading: createSelector(
    randomRecInputSelector,
    (randomRecInput) => randomRecInput.loading
  ),
  data: createSelector(
    randomRecInputSelector,
    (randomRecInput) => randomRecInput.data
  ),
  error: createSelector(
    randomRecInputSelector,
    (randomRecInput) => randomRecInput.error
  ),
};

export const randomAction = {
  ...randomSlice.actions,
};

export const randomReducer = randomSlice.reducer;