redux thunk callback function

Question

I'm new to redux/thunk and I'm going through some code that weren't written by me and I'm trying to understand how everything works. When the function refreshPlaylist is dispatched, it has the param id and a callback function. I'm wondering what playlist is referring to in the callback.

Component.jsx

loadData = id => {
    const { dispatch } = this.props;
    dispatch(
        PlaylistThunks.refreshPlaylist(id, playlist => {
            dispatch(PlaylistActions.setPlaylistUnderDisplay(playlist));
        })
    );
}

thunks.js

export const refreshPlaylist = (id, successCallBack) => dispatch => {
    PlayListService.getPlaylist(id)
        .then(response => {
            const playlist = response.data;
            PlayListService.getTracklist(id).then(response2 => {
                playlist.songs = response2.data.items;
                dispatch(Actions.updatePlaylist(playlist));
                if (successCallBack) {
                    successCallBack(playlist);
                }
            });
        })
        .catch(e => console.error(e));

It's the response.data from the PlayListService.getPlaylist(id) call. — Emile Bergeron
– Emile Bergeron, Commented Nov 26, 2019 at 18:05

Oliver · Accepted Answer · 2019-11-26 19:07:52Z

Big Picture: LoadData is dispatching two actions.

is to fetch the playlist using id. (This action is actually several actions wrapped into one, so we must move over to the Thunks.js to resolve).
is to update the store (view) using (playlist) as a name for the return value from calling refreshPlaylist.

=> setPlaylistUnderDisplay takes playlist and changes the view to display /that/ playlist (after the variable playlist has been set from refreshPlaylist).

In a more granular view:

// In Component.jsx:

you are dispatching two actions. The first one is refreshPlaylist which takes id. After that returns, it's using the reponse value from that action (named playlist) and calling setPlaylistUnderDisplay.

// in thunks.js

const playlist = response.data; // this is naming what the response is from the API call (getPlaylist(id)).

Then getTracklist(id) API call is being fired, the response to that (response2.data.items) is the name of the songs.

At which point dispatch(updatePlaylist(playlist)) // where playlist is the item returned from the first API call (const playlist = response.data;)

Collectives™ on Stack Overflow

redux thunk callback function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related