Tips for implementing multiple yield generators in redux-saga

Question

Tips for implementing multiple yield generators in redux-saga

Our redux-saga generator has multiple yield statements that return different results. I am struggling with typing them correctly.

Here's an illustration:

const addBusiness = function* addBusiness(action: AddBusinessActionReturnType): Generator<
  Promise<Business> | SelectEffect | PutEffect<{ payload?: ActionPayload<Array<Business>>; type: string }>,
  void,
  Business | BusinessesContainer
> {
    const { url, showToast = true } = action.payload;

    const businessDetails: Business = yield Network.get<Business>( // TypeScript error: Type 'Business | BusinessesContainer' is not assignable to type 'Business'.
      `businesses?url=${url}`,
    );

    if (showToast) {
      const getBusinessesFromState = (state: AppState) => ({
        ...state.business.businesses,
      });
      const businesses: BusinessesContainer = yield select(getBusinessesFromState); // TypeScript error: Type 'Business | BusinessesContainer' is not assignable to type 'BusinessesContainer'
      onAddBusinessSuccessToast(businesses, businessDetails);
    }

    yield put({ // TypeScript error: Type 'SimpleEffect<"PUT", PutEffectDescriptor<{ type: string; payload: Business[]; }>>' is not assignable to type 'SelectEffect'
      type: constants.SAVE_BUSINESS_REQUEST,
      payload: [businessDetails],
    });

The comments above indicate the TypeScript errors we are encountering. Any assistance would be greatly appreciated. Thank you

typescript generator redux-saga

Answer 1

Answer №1

It appears that there may be a tendency to type too much in this particular case. It is true that

yield Network.get<Business>()

does indeed return a Business, so there should not be a need to declare const businessDetails: Business when assigning a Business value to it.

Dealing with generator return types can be challenging, but TypeScript is capable of inferring the correct type on its own most of the time. Omitting the return type altogether would still work fine. If you're struggling with determining the right type, you can temporarily remove the return type to see the inferred type, as I did to address the issue of changing the union Business | BusinessesContainer to an intersection

Business & BusinessesContainer

.

The necessity of the ActionPayload type is unclear. Typing the payload of your put action as

ActionPayload<Array<Business>>

is overshooting, as Array<Business> alone suffices. Making the payload optional when you always provide it serves no purpose.

Implementing those two adjustments should resolve your TypeScript issues for now. Typically, API calls are executed within a call effect, which could complicate the types further, although it's ambiguous whether the use of call is mandatory.

const addBusiness = function* addBusiness(action: AddBusinessActionReturnType): Generator<
  Promise<Business> | SelectEffect | PutEffect<{ payload: Array<Business>; type: string }>,
  void,
  Business & BusinessesContainer
> {
    const { url, showToast = true } = action.payload;

    const businessDetails: Business = yield Network.get<Business>( `businesses?url=${url}` );

    if (showToast) {
      const getBusinessesFromState = (state: AppState) => ({
        ...state.business.businesses,
      });
      const businesses: BusinessesContainer = yield select(getBusinessesFromState);
      onAddBusinessSuccessToast(businesses, businessDetails);
    }

    yield put({
      type: "SAVE_BUSINESS_REQUEST",
      payload: [businessDetails],
    });
  }

// dummy types that I filled in to check types

type Business = {
  name: string;
  id: number;
}

type BusinessesContainer = {
  businesses: Business[];
}

const Network = {
  get: async <T>(url: string): Promise<T> => {
    return {} as unknown as T;
  }
}

type AddBusinessActionReturnType = {
  type: string;
  payload: {
    showToast?: boolean;
    url: string;
  }
}

type AppState = {
  business: {
    businesses: BusinessesContainer;
  }
}

const onAddBusinessSuccessToast = (businesses: BusinessesContainer, businessDetails: Business) => undefined;

Answer 2

It appears that there may be a tendency to type too much in this particular case. It is true that

yield Network.get<Business>()

does indeed return a Business, so there should not be a need to declare const businessDetails: Business when assigning a Business value to it.

Dealing with generator return types can be challenging, but TypeScript is capable of inferring the correct type on its own most of the time. Omitting the return type altogether would still work fine. If you're struggling with determining the right type, you can temporarily remove the return type to see the inferred type, as I did to address the issue of changing the union Business | BusinessesContainer to an intersection

Business & BusinessesContainer

.

The necessity of the ActionPayload type is unclear. Typing the payload of your put action as

ActionPayload<Array<Business>>

is overshooting, as Array<Business> alone suffices. Making the payload optional when you always provide it serves no purpose.

Implementing those two adjustments should resolve your TypeScript issues for now. Typically, API calls are executed within a call effect, which could complicate the types further, although it's ambiguous whether the use of call is mandatory.

const addBusiness = function* addBusiness(action: AddBusinessActionReturnType): Generator<
  Promise<Business> | SelectEffect | PutEffect<{ payload: Array<Business>; type: string }>,
  void,
  Business & BusinessesContainer
> {
    const { url, showToast = true } = action.payload;

    const businessDetails: Business = yield Network.get<Business>( `businesses?url=${url}` );

    if (showToast) {
      const getBusinessesFromState = (state: AppState) => ({
        ...state.business.businesses,
      });
      const businesses: BusinessesContainer = yield select(getBusinessesFromState);
      onAddBusinessSuccessToast(businesses, businessDetails);
    }

    yield put({
      type: "SAVE_BUSINESS_REQUEST",
      payload: [businessDetails],
    });
  }

// dummy types that I filled in to check types

type Business = {
  name: string;
  id: number;
}

type BusinessesContainer = {
  businesses: Business[];
}

const Network = {
  get: async <T>(url: string): Promise<T> => {
    return {} as unknown as T;
  }
}

type AddBusinessActionReturnType = {
  type: string;
  payload: {
    showToast?: boolean;
    url: string;
  }
}

type AppState = {
  business: {
    businesses: BusinessesContainer;
  }
}

const onAddBusinessSuccessToast = (businesses: BusinessesContainer, businessDetails: Business) => undefined;

Tips for implementing multiple yield generators in redux-saga

Answer №1

Similar questions

NativeScript Error Code NG8001: Element 'ActionBar' is unrecognized

Using Promise<void> instead of Promise<any> is the preferred approach

Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Using React to make an API call without utilizing hooks

Error Alert: "Invariant Violation" detected in a TypeScript program utilizing React

Testing the number of times module functions are called using Jest

Issue with accessing data in React Admin Show Page using useRecordContext() function leads to undefined return

Can the month dropdown in react-datepicker be modified to display numbers instead of names?

Importing dynamically into Ionic 2 from locations other than the "node_modules" directory

What is the process for extracting TypeScript types from GraphQL query and mutation fields in order to get args?

What is the most effective method of testing with jest to verify that a TypeScript Enum list contains all the expected string values?

Deactivating Google Map Clustering for Individual Markers

The parameter type 'typeof LogoAvatar' cannot be assigned to the argument type 'ComponentType<LogoProps & Partial<WithTheme>'

Can you determine if a function is a generator function if .bind() has already been applied to it?

Exploring the intricacies of extracting nested JSON data in TypeScript

Issue with redirecting to another link in Angular routing

Display different icons in an Angular application based on the value received from an API in real

Adjusting the settimeout delay time during its execution

ESLint encountered an issue: Reserved keyword 'interface' triggered a parsing error

Retrieve a collection of nested dictionaries containing flask and angular data