I've been diving into my project involving react redux-saga with TypeScript and I'm facing an issue with a type error within my saga file. This is my first experience with TypeScript.
The error originates from the saga.ts file, specifically this code snippet:
yield put(fetchContactsSuccess(data)).
The error message reads as follows:
Argument of type 'IContact[]' is not assignable to parameter of type 'FetchContactsSuccessPayload'.
Property 'contacts' is missing in type 'IContact[]' but required in type 'FetchContactsSuccessPayload'.
I am uncertain about what I might be overlooking or misunderstanding.
In my types.ts file:
export interface FetchContactsSuccessPayload {
contacts: IContact[]
}
export type FetchContactsRequest = {
type: typeof GET_ALL_CONTACTS_REQUEST
}
export type FetchContactsSuccess = {
type: typeof GET_ALL_CONTACTS_SUCCESS,
payload: FetchContactsSuccessPayload
}
export type FetchContactsError = {
type: typeof GET_ALL_CONTACTS_ERROR,
payload: {message: string}
}
Within actions.ts:
export const fetchContactsRequest = (): FetchContactsRequest => ({
type: GET_ALL_CONTACTS_REQUEST,
})
export const fetchContactsSuccess = (payload: FetchContactsSuccessPayload): FetchContactsSuccess => ({
type: GET_ALL_CONTACTS_SUCCESS,
payload
})
export const fetchContactsError = (error: any) => ({
type: GET_ALL_CONTACTS_ERROR,
error
})
Regarding reducers.ts:
export const contactReducer = (state=initialState, action: ProjectActionTypes) => {
switch (action.type) {
case GET_ALL_CONTACTS_REQUEST:
return {
...state,
pending: true,
};
case GET_ALL_CONTACTS_SUCCESS:
return {
...state,
pending: false,
contacts: action.payload
}
case GET_ALL_CONTACTS_ERROR:
return {
...state,
pending: false,
error: action.payload
};
default:
return state;
}
}
And finally, in saga.ts:
export function* fetchContacts() {
try {
const data: IContact[] = yield call(getContacts)
console.log(data);
yield put(fetchContactsSuccess(data))
} catch (error) {
}
}
export function* fetchAllContactsSaga() {
yield takeEvery(GET_ALL_CONTACTS_REQUEST, fetchContacts)
}
export default function* rootSaga() {
yield all([fork(fetchAllContactsSaga)])
}
Even after attempting to use type 'any' instead of IContact[], the issue persists. When I log the response, I receive a status code of 200 indicating that it's functioning properly, yet GET_ALL_CONTACTS_REQUEST never seems to trigger.