I recently developed a deletion reducer using reduxjs/toolkit:
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { AppThunk } from "../store";
import { ReportedCase, deleteReportCase } from "../../api/reportedCasesApi";
import history from "../../history/history";
interface ReportedCasesState {
username: string;
loading: boolean;
reportedCases: ReportedCase[];
error: string | null;
}
const initialState: ReportedCasesState = {
username: 'user',
loading: false,
reportedCases: [],
error: null
}
const reportedCases = createSlice({
name: 'reportedCase',
initialState,
reducers: {
caseStart: (state) => {
state.error = null;
},
deletedReportedCaseSuccess: (state, action: PayloadAction<number>) => {
state.reportedCases = state.reportedCases.filter(case => case.id !== action.payload)
},
reportCaseError: (state, action: PayloadAction<string>) => {
state.error = action.payload
},
})
export const { caseStart,
} = reportedCases.actions;
export default reportedCases.reducer;
export const deleteReportCase = (id: number): AppThunk => async dispatch => {
try {
dispatch(caseStart());
const deletedReportedCase = await deleteReportCase(id);
dispatch(reportCaseSuccess(deletedReportedCase))
} catch (error) {
let errorMessage = "Internal Server Error";
if (error.response) {
errorMessage = error.response.data.message;
}
dispatch(reportCaseError(errorMessage))
}
}
Encountered an issue with typescript:
Argument expression expected.ts(1135)
Type 'boolean' is not assignable to type 'CaseReducer<ReportedCasesState, { payload: any; type: string; }> | CaseReducerWithPrepare<ReportedCasesState, PayloadAction<any, string, any, any>>'.ts(2322)