Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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})
);
};
}
// 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

This comment has been minimized.

Show comment
Hide comment
@JulianKingman

JulianKingman Mar 23, 2018

@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 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

This comment has been minimized.

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