Skip to content

Instantly share code, notes, and snippets.

@markerikson
Last active June 28, 2024 05:30
Show Gist options
  • Save markerikson/ea4d0a6ce56ee479fe8b356e099f857e to your computer and use it in GitHub Desktop.
Save markerikson/ea4d0a6ce56ee479fe8b356e099f857e to your computer and use it in GitHub Desktop.
Redux-Thunk examples
// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})
);
};
}
// or, written with async/await syntax:
function myThunkActionCreator(someValue) {
return async (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"};
let response;
try {
response = await myAjaxLib.post("/someEndpoint", {data: someValue});
} catch(error) {
dispatch({type : "REQUEST_FAILED", error});
return;
}
dispatch({type: "REQUEST_SUCCEEDED", payload: response});
}
}
// An example of conditional dispatching based on state
const MAX_TODOS = 5;
function addTodosIfAllowed(todoText) {
return (dispatch, getState) => {
const state = getState();
if(state.todos.length < MAX_TODOS) {
dispatch({type : "ADD_TODO", text : todoText});
}
}
}
// An example of checking state after a dispatch
function checkStateAfterDispatch() {
return (dispatch, getState) => {
const firstState = getState();
dispatch({type : "FIRST_ACTION"});
const secondState = getState();
if(secondState.someField != firstState.someField) {
dispatch({type : "SECOND_ACTION"});
}
}
}
// An example of a thunk dispatching other action creators,
// which may or may not be thunks themselves. No async code, just
// orchestration of higher-level synchronous logic.
function complexSynchronousThunk(someValue) {
return (dispatch, getState) => {
dispatch(someBasicActionCreator(someValue));
dispatch(someThunkActionCreator());
}
}
// One solution to the "cross-slice state in reducers" problem:
// read the current state in a thunk, and include all the necessary
// data in the action
function crossSliceActionThunk() {
return (dispatch, getState) => {
const state = getState();
// Read both slices out of state
const {a, b} = state;
// Include data from both slices in the action
dispatch(type : "ACTION_FOR_A_AND_B", payload : {a, b});
}
}
@JulianKingman
Copy link

@markerikson I have a newbie question, that came up as I try to wrap my head around thunk. Why return an action creator that's a function, instead of including the logic in the function itself, and then dispatching conditionally or asynchronously based on the outcome.

Using your first example:

// You could also pass in dispatch, if you didn't want to rely on store
function myThunkActionCreator(someValue) {
  store.dispatch({type : "REQUEST_STARTED"});
      
  myAjaxLib.post("/someEndpoint", {data : someValue})
    .then(
      response => store.dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
      error => store.dispatch({type : "REQUEST_FAILED", error : error})
    );    
  };
}

@markerikson
Copy link
Author

@IgorLesnevskiy
Copy link

IgorLesnevskiy commented May 2, 2020

function myThunkActionCreator(someValue) {
    return async (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"};
        
        let response;
        
        try {
            response = myAjaxLib.post("/someEndpoint", {data: someValue});                        
        } catch(error) {
            dispatch({type : "REQUEST_FAILED", error});
        }
        
        dispatch({type: "REQUEST_SUCCEEDED", payload: response});
    }
}

Isn't a mistake in that piece of code? Don't we have to use the await keyword in front of myAjaxLib.post("/someEndpoint", {data: someValue}); ?

@markerikson
Copy link
Author

@IgorLesnevskiy : good catch! I'd originally written it as promise chaining and converted it, but clearly missed that. Thanks!

@BrainCrumbz
Copy link

BrainCrumbz commented May 25, 2021

Hello. Just for completeness, a question not focused on thunk itself, but on the actual code sample logic:

in async/await example, in catch branch, shouldn't the function return after dispatching error (link)?
Or as an alternative, shouldn't dispatching success be included within try branch?

Thanks for these thunk examples!

@markerikson
Copy link
Author

@BrainCrumbz: This is actually a tricky topic. The problem is that if an error is thrown while doing the success dispatch, we'd actually end up dispatching the success action as well. That's probably not what you want semantically - the assumption is that the failure action should only be dispatched if the request failed.

Dan Abramov has pointed out similar issues with doing React state updates several times:

@BrainCrumbz
Copy link

BrainCrumbz commented May 25, 2021

@markerikson thanks for replying and for pointing that out, did not consider the implications of the second alternative. So I guess the first alternative, returning after dispatching error, is the only way left:

function myThunkActionCreator(someValue) {
    return async (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"};
        
        let response;
        
        try {
            response = await myAjaxLib.post("/someEndpoint", {data: someValue});                        
        } catch(error) {
            dispatch({type : "REQUEST_FAILED", error});
            
            // avoid dispatching success, skip the rest
            return;
        }
        
        dispatch({type: "REQUEST_SUCCEEDED", payload: response});
    }
}

Otherwise in case of myAjaxLib.post error, one ends up dispatching error as well as success?

@alimertcakar
Copy link

You could use the finally keyword after catch for readability.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment