옝옹
냠
옝옹
전체 방문자
오늘
어제
  • 분류 전체보기 (84)
    • [LG유플러스]유레카 SW (5)
    • React (20)
    • JS (17)
    • TypeScript (5)
    • CSS & HTML (1)
    • 알고리즘 (11)
    • JAVA (20)
    • GIT (1)
    • 자격증 (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 화살표함수
  • 노마드코더
  • toFixed
  • reverse() 메서드
  • 변수선언
  • ==
  • indexOf()
  • map
  • 자바스트립트
  • 리액트를다루는기술
  • 템플릿리터럴
  • do-while문
  • sort() 메서드
  • useEffect
  • 함수선언
  • 타입스크립트
  • 자바스크립트
  • java.util패키지
  • useState
  • join() 메서드
  • fillter
  • While문
  • useRef
  • 혼자공부하는자바
  • 기본api클래스
  • java.lang패키지
  • 백준
  • useMemo
  • map() 함수
  • 접근제한자
  • continue문
  • reduce
  • template literal
  • 정적멤버
  • match()
  • break문
  • JavaScript
  • 자바
  • switch문
  • 인스턴스멤버
  • TypeScript
  • 혼자 공부하는 자바
  • 리액트
  • js
  • java
  • Node.js
  • join()
  • 타입변환
  • useCallback
  • 코드스플리팅

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
옝옹

냠

[Error] addCase cannot be called with two reducers for the same action type
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;
저작자표시 비영리 변경금지 (새창열림)

'TypeScript' 카테고리의 다른 글

[TS] Typescript #day3  (2) 2024.12.18
[TS] Typescript #day2  (2) 2024.12.18
[TS] Typescript #day1  (2) 2024.12.16
[TypeScript] 타입스크립트란?  (2) 2024.02.26
    'TypeScript' 카테고리의 다른 글
    • [TS] Typescript #day3
    • [TS] Typescript #day2
    • [TS] Typescript #day1
    • [TypeScript] 타입스크립트란?
    옝옹
    옝옹

    티스토리툴바