How to make other function gets called after first is executed?-CodePudding

I am working on a react app where I am using redux for state management and I have 2 functions to call and I want them to run only after 1st function is executed.

Here's a snippet of whats I am doing:

if (this.props.page_num < this.props.numPages) {
       this.props.fetchCodeSets(params, isFiltered, isSearched).then(() => {
          this.props.setPageNumber(this.props.page_num   1);
        });
      }

Here I am getting a error stating:

CodeSetsTable.jsx?2468:132 Uncaught TypeError: this.props.fetchCodeSets(...).then is not a function

fetchCodeSets function:

export function* fetchCodeSets(action) {
  try {
    const response = yield call(Services.fetchCodeSets, action.params);
    const { dtoList } = response.data.pagedList;
    const num_pages = response.data.pagedList.numPages;
    const total_records = response.data.pagedList.totalRecords;
    const page_number = response.data.pagedList.pageNumber;
    const postCodeSetsData = dtoList.map(({
      entity_id, code_system_id, code_system_category_id, code_set_id, code_description, code, entity_name,
    }) => ({
      entity_id, code_system_id, code_system_category_id, code_set_id, code_description, code, entity_name,
    }));
    yield put(ActionCreator.setCodeSets(dtoList, num_pages, total_records, postCodeSetsData, page_number, action.isFiltered, action.isSearched));
  } catch (error) {
    sagaException(error);
  }
}

CodePudding user response：

Since you are using redux saga, I believe the most appropriate thing to do is compose another saga.

export function* fetchCodeSetsAndSetPage(action) {
  try {
    yield put (ActionCreator.fetchCodes(...));
    yield put (ActionCreator.setPageNumber(...));
  } catch (error) {
    sagaException(error);
  }
}

And then call that one instead in your component.

Some docs.

CodePudding user response：

try

 if (this.props.page_num < this.props.numPages) {
       this.props.fetchCodeSets(params, isFiltered, isSearched)
       return this.props.setPageNumber(this.props.page_num   1);

    }

CodePudding user response：

make fetchCodeSets function async. You can write promise like then only with an async functions. also use a return statement inside the function. The declaration of the fetchCodeSets function should be like this

const fetchCodeSets = async (params) => {
    //codes here
    return;
}