Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save IAMtheIAM/85dad9813d4d7c357c7a59190826a4f1 to your computer and use it in GitHub Desktop.
Save IAMtheIAM/85dad9813d4d7c357c7a59190826a4f1 to your computer and use it in GitHub Desktop.
Dispatching action creators comparison
// approach 1: define action object in the component
this.props.dispatch({
type : "EDIT_ITEM_ATTRIBUTES",
payload : {
item : {itemID, itemType},
newAttributes : newValue,
}
});
// approach 2: use an action creator function
const actionObject = editItemAttributes(itemID, itemType, newAttributes);
this.props.dispatch(actionObject);
// approach 3: directly pass result of action creator to dispatch
this.props.dispatch(editItemAttributes(itemID, itemType, newAttributes));
// approach 4: pre-bind action creator to automatically call dispatch
const boundEditItemAttributes = bindActionCreators(editItemAttributes, dispatch);
boundEditItemAttributes(itemID, itemType, newAttributes);
// parallel approach 1: dispatching a thunk function
const innerThunkFunction1 = (dispatch, getState) => {
// do useful stuff with dispatch and getState
};
this.props.dispatch(innerThunkFunction1);
// parallel approach 2: use a thunk action creator to define the function
const innerThunkFunction = someThunkActionCreator(a, b, c);
this.props.dispatch(innerThunkFunction);
// parallel approach 3: dispatch thunk directly without temp variable
this.props.dispatch(someThunkActionCreator(a, b, c));
// parallel approach 4: pre-bind thunk action creator to automatically call dispatch
const boundSomeThunkActionCreator = bindActionCreators(someThunkActionCreator, dispatch);
boundSomeThunkActionCreator(a, b, c);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment