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;