[Meta] Vuex action pattern

At the moment we are writing VueX fetch actions with this pattern, as per documentation

 export const requestUsers = ({ commit }) => commit(types.REQUEST_USERS);
  export const receiveUsersSuccess = ({ commit }, data) => commit(types.RECEIVE_USERS_SUCCESS, data);
  export const receiveUsersError = ({ commit }, error) => ;

  export const fetchUsers = ({ state, dispatch }) => {
    dispatch('requestUsers');

    axios.get(state.endpoint)
      .then(({ data }) => dispatch('receiveUsersSuccess', data))
      .catch((error) => {
        dispatch('receiveUsersError', error)
        createFlash('There was an error')
      });
  }

I am still wondering why we do it that way, instead of directly commiting the mutations:

  export const fetchUsers = ({ state, commit }) => {
    commit(types.REQUEST_USERS)

    axios.get(state.endpoint)
      .then(({ data }) => {commit(types.RECEIVE_USERS_SUCCESS, data)})
      .catch((error) => {
        commit(types.REQUEST_USERS_ERROR, error);
        createFlash('There was an error');
      });
  }

Arguments for the current pattern

  1. All applications follow the same pattern, making it easier for anyone to maintain the code
    • If we go with the other pattern consistently, it is also fine
  2. All data in the application follows the same lifecycle pattern
    • Really the same point as above
  3. Actions are contained and human friendly
  4. Unit tests are easier
    • Unit tests are the same with both approaches but you have to write a lot more of them with the current pattern
  5. Actions are simple and straightforward

Arguments against the current pattern

  1. We have actions that do nothing but commit a mutation of the same name
  2. It's one more step to debug and keep in mind
  3. It's not the VueX way: https://vuex.vuejs.org/guide/actions.html#actions
  4. Actions are meant to be async wrappers for sync mutations
  5. It blows up merge requests

Sample merge request:

I have created this sample merge request: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/8146 which converts existing pattern to the "simpler one". For the same functionality we end up with 12 less actions and 220 less lines of code:

github.com/AlDanial/cloc v 1.80  T=0.01 s (148.9 files/s, 56594.2 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                       2             87              5            668
-------------------------------------------------------------------------------
SUM:                             2             87              5            668
-------------------------------------------------------------------------------

After:

github.com/AlDanial/cloc v 1.80  T=0.01 s (134.6 files/s, 38293.4 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                       2             76              5            488
-------------------------------------------------------------------------------
SUM:                             2             76              5            488
Edited by Fatih Acet