Await value returned from a redux-thunk dispatch rather than using state

Question

I am using react, redux, and redux-thunk have a set of queries I have to run in the "logic layer". The results of each "action" call determine the path I take, so I am actually awaiting the promises returned from the dispatch call to the redux-thunks.

const handleClick = async (args) => {
  let foo = await dispatch(fetchFoo(args));
  if(foo) { do something... }
  else {
    let bar = await dispatch(fetchBar(args));
    if(bar) { do another thing... }
    else { or do another thing... }
   }
};

Example thunk:

export const fetchFoo = args => async (dispatch) => {
  let foo = await api.fetchFoo(args);
  dispatch(fetchSuccess(foo));
  // !!!!!!!!!!
  return foo;
  // !!!!!!!!!!
}

If I don't do this, it's pretty awkward to wait until a re-render (maybe) puts "foo" in the redux state prop, then wait again until a re-render (maybe) puts "bar" in the redux state, etc...

I've never really seen this pattern before although I have seen awaiting void promises return from thunks.

Is it acceptable to return the value from the redux-thunk action and use it rather than getting the values from a redux state selector? This seems to break the rules of the "single source of truth." If not, what do I do?

skyboyer · Accepted Answer · 2019-08-02 21:47:56Z

-1

Using this approach it would be much harder to refactor state and change flow how data is loaded. Say in case requirements are changed and fetchBar() should be called by interval or need to be loaded by parent and passed through props. Or you want to throttle loading. Or cache data for some time.

I used this pattern with Promise returned and found it makes things rather complicated. The only advantage I found: I didn't need having isLoading or loadingError flags in redux storage to know if data is already loaded or not.

But also it means I have to call some methods redundantly just to retrieve brand new Promise await for - since promises can be resolved only once - in order to wait until some data loaded. And once some action triggers few API calls in sequence I ended with awaiting for data I did not even need.

In opposite if we rely only on data in redux it would be as easy as const isStillLoading = props.isData1Loading && props.isData2Loading

Consider moving condition for loading data into action itself. If you find API calls sequence becomes too complex you may switch to redux-saga or redux-loop which both provide better control over execution flow.

edited Aug 2, 2019 at 21:47

answered Jul 26, 2019 at 8:37

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user210757 Over a year ago

I have to read this a few more times to make sure I understand. For a little background, I am browsing thousands of records, then click on one which loads a detail window that needs foo or bar. I could load in the detail window, but I like how simple it is now.

skyboyer Over a year ago

maybe in this particular case there is no benefit in using redux for storing context-specific data, what do you think?

user210757 Over a year ago

yes I had that thought, I was just trying to keep the api out of my components.

Collectives™ on Stack Overflow

Await value returned from a redux-thunk dispatch rather than using state

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related