redux-saga help passing in the api query

Viewed 20

I'm fairly new to redux-saga and can make most sense of the documentation however i'm working on an action to fire an updated call to the api that needs to change the query. categoryId is going to be passed in on this action but i cannot get it 100% i end up breaking the flow and then the action will not work.

here is the saga.

const categoryRelatedProductsApi = async () => {
 return firstValueFrom(
   productsApiService.GetProducts({
  path: { version: "1" },
  query: { active: true, categoryId: id } //id needs to be a number and dynamic
  })
 );
};

function* loadRelatedProducts() {
 try {
   let productDTO: ProductDTO = yield call(categoryRelatedProductsApi);
   yield put(getRelatedProductListSuccessful(productDTO));
 } catch (error: any) {
 yield put(apiError(error?.response?.data?.message));
 }
}

function* getRelatedProductsList(id: number) {
try {
  yield put(getRelatedProductList(id));
 } catch (error: any) {
  yield put(apiError(error?.response?.data?.message));
 }

}

actions file

//i dont know if i should pass it in as a payload here... if not then where do i make the connection for id to pass into the api call?

export const getRelatedProductList = (id: number) => {
return {
  type: GET_RELATED_PRODUCT_LIST,
  payload: id
};
};

export const getRelatedProductListSuccessful = (products: any) => {
 return {
   type: GET_RELATED_PRODUCT_LIST_SUCCESSFUL,
   payload: products
 };
};

UPDATE:

export function* watchLoadRelatedProductList() {
 yield takeEvery(GET_RELATED_PRODUCT_LIST_SUCCESSFUL, 
 getRelatedProductsList); 
 }

My watcher gets the TS error: The last overload gave the following error. Argument of type 'string' is not assignable to parameter of type 'TakeableChannel'

update the effect to include typed params

type RelatedListParams = { id: number };
function* getRelatedProductsList({ id }: RelatedListParams) {
 try {
   yield put(getRelatedProductList(id));
 } catch (error: any) {
   yield put(apiError(error?.response?.data?.message));
 }
}

but still get the error so i assume that is where the flow is breaking/stopping

0 Answers
Related