Redux does not call actions properly

Question

In my React Native app I have redux actions to load and play a video. Whenever a user plays a video, the following will be executed:

this.props.dispatch(loadVideo(true, mediaID))

And the corresponding actions:

export const loadVideo = (isLoading, videoId) => async dispatch => { dispatch({ type: LOAD_MEDIA, payload: isLoading }) if(videoId){ dispatch(playVideo(videoId)) } } export const playVideo = (videoId) => async dispatch => { let p = await obtainMediaSource(videoId); dispatch({ type: PLAY_MEDIA, payload: p }) dispatch(loadVideo(false)) }

The problem is that somehow loadVideo action is waiting for playVideo action to finish executing before updating the state. However, I wish that loadVideo immediately updates the state to notify the app that a video is about to be loaded. What am I doing wrong here? Isn't this a good way to call actions (one calls the other)?

Joseph D. · Accepted Answer · 2019-08-05 08:24:14Z

This is a good scenario to make use of .then() rather than await.

This way, you'll have a non-blocking function and capitalize on the callback to asynchronously dispatch PLAY_MEDIA once the media source has been fully obtained.

Here's an untested refactored code:

export const setLoading = (isLoading) => dispatch => { dispatch({ type: LOAD_MEDIA, payload: isLoading }) } export const loadVideo = (videoId) => dispatch => { if (!videoId) return; setLoading(true); // non-blocking obtainMediaSource(videoId) .then((p) => { dispatch({ type: PLAY_MEDIA, payload: p }) setLoading(false); }); }

Collectives™ on Stack Overflow

Redux does not call actions properly

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related