Returning Promises from Vuex actions

Question

I recently started migrating things from jQ to a more structured framework being VueJS  and I love it   Conceptually  Vuex has been a bit of a paradigm shift for me  but I m confident I know what its all about now  and totally get it  But there exist a few little grey areas  mostly from an implementation standpoint   This one I feel is good by design  but don t know if it contradicts the Vuex cycle of uni-directional data flow   Basically  is it considered good practice to return a promise -like  object from an action  I treat these as async wrappers  with states of failure and the like  so seems like a good fit to return a promise  Contrarily mutators just change things  and are the pure structures within a store module

User · Answer

TL DR  return promises from you actions only when necessary  but DRY chaining the same actions   For a long time I also though that returning actions contradicts the Vuex cycle of uni-directional data flow   But  there are EDGE CASES where returning a promise from your actions might be  necessary    Imagine a situation where an action can be triggered from 2 different components  and each handles the failure case differently  In that case  one would need to pass the caller component as a parameter to set different flags in the store   Dumb example  Page where the user can edit the username in navbar and in  profile page  which contains the navbar   Both  trigger an action  change username   which is asynchronous  If the promise fails  the page should only display an error in the component the user was trying to change the username from   Of course it is a dumb example  but I don t see a way to solve this issue without duplicating code and making the same call in 2 different actions

User · Answer

actions js  const axios   require  axios    const types   require    types     export const actions       GET CONTENT  commit        axios get    URL           then doc   gt           const content   doc data          commit types SET CONTENT   content           setTimeout      gt             commit types IS LOADING   false               1000            catch err   gt           console log err                    home vue   lt script gt    import  value   onCreated  from  vue-function-api     import  useState  useStore  from   u3u vue-hooks      export default       name   home        setup          const store   useStore          const state                useState   content     isLoading                   onCreated      gt           store value dispatch  GET CONTENT                      return             state                      lt  script gt

User · Answer

actions in Vuex are asynchronous  The only way to let the calling function  initiator of action  to know that an action is complete - is by returning a Promise and resolving it later   Here is an example  myAction returns a Promise  makes a http call and resolves or rejects the Promise later - all asynchronously  actions        myAction context  data            return new Promise  resolve  reject    gt                   Do something here    lets say  a http call using vue-resource             this  http   api something   then response   gt                       http success  call the mutator and change something in state                 resolve response       Let the calling function know that http is done  You may send some data back                error   gt                       http failed  let the calling function know that action did not work out                 reject error                                       Now  when your Vue component initiates myAction  it will get this Promise object and can know whether it succeeded or not  Here is some sample code for the Vue component   export default       mounted  function                This component just got created  Lets fetch some data here using an action         this  store dispatch  myAction   then response   gt                console log  Got some data  now lets show something in this component              error   gt                console error  Got nothing from server  Prompt user to check internet connection and try again                        As you can see above  it is highly beneficial for actions to return a Promise  Otherwise there is no way for the action initiator to know what is happening and when things are stable enough to show something on the user interface   And a last note regarding mutators - as you rightly pointed out  they are synchronous  They change stuff in the state  and are usually called from actions  There is no need to mix Promises with mutators  as the actions handle that part   Edit  My views on the Vuex cycle of uni-directional data flow   If you access data like this  store state  your data key   in your components  then the data flow is uni-directional   The promise from action is only to let the component know that action is complete   The component may either take data from promise resolve function in the above example  not uni-directional  therefore not recommended   or directly from  store state  your data key   which is unidirectional and follows the vuex data lifecycle   The above paragraph assumes your mutator uses Vue set state   your data key   http data   once the http call is completed in your action

User · Answer

Actions        ADD PRODUCT    context product    gt      return Axios post uri  product  then  response    gt        if  response status      success             context commit  SET PRODUCT  response data data            return response data             Component  this  store dispatch  ADD PRODUCT  data  then  res    gt      if  res status      success            write your success actions here         else           write your error actions here

User · Answer

Just for an information on a closed topic   you don   t have to create a promise  axios returns one itself   Ref  https   forum vuejs org t how-to-resolve-a-promise-object-in-a-vuex-action-and-redirect-to-another-route 18254 4  Example       export const loginForm      commit    data    gt          return axios          post  http   localhost 8000 api login   data           then  response    gt              commit  logUserIn   response data                       catch  error    gt              commit  unAuthorisedUser     error error response data                        Another example       addEmployee   commit  state                   return insertEmployee state employee           then result   gt              commit  setEmployee   result data             return result data     resolve                      catch err   gt                         throw err response data     reject                    Another example with async-await      async getUser   commit              try               const currentUser   await axios get   user current               commit  setUser   currentUser              return currentUser           catch  err                commit  setUser   null              throw  Unable to fetch current user

[promise] Returning Promises from Vuex actions

Examples related to promise

Examples related to vue.js

Examples related to es6-promise

Examples related to state-management

Examples related to vuex