Dispatching action creators comparison

dispatching-action-creators.js

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