[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
- 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
- All data in the application follows the same lifecycle pattern
- Really the same point as above
- Actions are contained and human friendly
- 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
- Actions are simple and straightforward
Arguments against the current pattern
- We have actions that do nothing but commit a mutation of the same name
- It's one more step to debug and keep in mind
- It's not the VueX way: https://vuex.vuejs.org/guide/actions.html#actions
- Actions are meant to be async wrappers for sync mutations
- 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