reactjs - How to handle conditional thunk calls depending on state -

i'm facing problem regarding use of multiple thunk calls each call depending on previous state. let me try clarify problem.

specification

i have thunk calls api returning list of items given accountid. list needs iterated find if given item exists. if element we're searching doesn't belong list need api call next accountid. process repeated until, either item found or accountid's have been used.

---

current implementation

right current implementation done using thunk api call , once response filter list. if item in list dispatch action called 'item_found' otherwise dispatch action called 'next_account'. action increments index stored in redux store. then, in componentdidupdate check if index has reached accountid length , if redirect '/'. otherwise, call thunk again.

things don't solution:

• lots of re-renders triggered
• index stored in redux store

---

improve implementation best solution can find.

any ideas?

you should able put inside thunk , avoid unnecessary rendering, perhaps (i assuming es6 syntax):

export const finditem = (ids, item) => {   return async (dispatch, getstate) => {     try {       (const id of ids) {         const items = await getitemsfromapi(id)         if (items.find(i => === item)) {           return dispatch('item_found')         }       }     } catch (e) {       // log error     }   } } 

you note use of es6 await keyword convert multiple async api calls synchronous sequence.