How to return promise from an action?

[vue-electron]

How to return promise from an action?

[ktmouk]

In my case,
It was solved by creating a custom plugin.

1. Create Custom Plugin

// promise-action.js

import promiseIpc from 'electron-promise-ipc' // yarn add electron-promise-ipc

const DISPATCH = 'promise-action-dispatch'

export default (options = {}) => store => {
  function renderer () {
    store.dispatchPromise = (type, payload) =>
      promiseIpc.send(DISPATCH, {
        type,
        payload
      })
  }

  function main (store) {
    promiseIpc.on(DISPATCH, ({ type, payload }) => {
      return store.dispatch(type, payload)
    })
  }

  return process.type === 'renderer'
    ? renderer()
    : main(store)
}

2. Load Plugin

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'
import createPromiseAction from './promise-action' // <-- ADD

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations(),
    createPromiseAction() // <-- ADD
  ],
  strict: process.env.NODE_ENV !== 'production'
})

3. Use

// Action
const actions = {
  yourAction ({commit}, items) {
    return 'OK'
  }
}

// Component
const response = await this.$store.dispatchPromise('yourAction')
console.log(response) // OK

[JeroenSormani]

Was looking all over the internet looking why my Promise handling wasn't working.. Would be great to have a fix in the package itself without having to manually create the plugin.

[busheezy]

I've been wasting a bunch of time trying to figure out why I can't get this working. I guess this library isn't really in a usable state.

how did you solve this problem???

[cwirz]

Thanks for this plugin. I tried it with axios and it works but i get an error message in the renderer console: Unhandled rejection Error: Request failed with status code 400

const actions = {
  login ({commit}, data) {
    return axios.post(getTokenUrl, data)
      .then(r => {
        commit('SET_TOKEN', data)
      })
  },
}

Any idea how to fix this?

[ktmouk]

@cwirz probably, Your sending request failed (url, data or method is invalid). axios/axios#972
You can use .catch for catch the error response.

const actions = {
  login ({commit}, data) {
    return axios.post(getTokenUrl, data)
      .then(r => {
        commit('SET_TOKEN', data)
      })
      .catch(e => {
         // when request failed
         console.log(e)  
      })
  },
}

[cwirz]

@ktmouk yeah this kinda worked but i wanted to catch the error in the component from where i dispatch the action:

this.$store.dispatchPromise('auth/login', this.credentials)
  .then(r => {
    this.skip()
  })
  .catch(e => {
    this.error = e.response.data
  })

This time i dont get any error like that anymore so thanks!

[darkman97i]

In my case I'm usign axios and I return the Promise ( okm.$ws.auth.login really is a method what returns the axios post ):

const actions = {
  login({ commit }, userCredentials) {
    return okm.$ws.auth.login(userCredentials.username, userCredentials.password).then(response => {
      const token = response;
      okm.$ws.setToken(token);
      commit('setToken', token);
    });
  }
};

And from the component I'm using in this way ( you can consume the response from the action and the error from the component too ):

methods: {
      ...mapActions('user', ['login'),
      executeLogin() {
        this.login({ username: this.username, password: this.password }).then(response => {
          // Get user data
          ....
        }).catch(error => {
          this.showError(error);
        });
      }
    }

[akodkod]

#44

[namila007]

@ktmouk thank you so much for your solution. I was searching why I cant get the async replies using dispatch. If you can please add it as a plugin to npm, so others can easily use this. thanks again :)

[ferm10n]

The heart of the issue is that there's no way for the result of an action to be passed back to the renderer process.
This was my approach to changing the library, although it needs electron > 7 to use invoke...

ferm10n@ec3bab4#diff-5ea1fc93a80776ff21fc637ff5967a710b3effa4720112d9b09617662fb2f8afR46-R107

Also I think I might have been dumb and could have just used event.reply() and not changed the required electron version
just kidding, I thought it would be easy like socket.io does it... I guess there isn't a way to provide a callback in the renderer process? Which means getting the responses from main to resolve the right actions in the renderer would get hella weird.