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})
    );    
  };
}

JulianKingman commented 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

This comment has been minimized.

Show comment
Hide comment
Owner

markerikson commented Apr 8, 2018

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