@supermdguy/tuxi v0.2.0

Tuxi

:money_with_wings: High class service for your async needs

Tuxi automatically manages the state of asynchronous tasks, so you don't have to. No more setting isLoading after every api request!

Install

npm install --save @supermdguy/tuxi

Examples

Pure JavaScript

import tuxi from '@supermdguy/tuxi'
import { fetchItems } from './api'

const fetchItemsTask = tuxi.task(fetchItems)

// ⚡ Fire the api call
fetchItemsTask.start()

// The task is immediately set to pending
console.log(fetchItemsTask.pending) // true

// 🌀 The spinning property has a configurable delay
setTimeout(() => console.log(fetchItemsTask.spinning), 1500) // true

// After a while...
console.log(fetchItemsTask.hasValue) // true

Vuex Integration

import tuxi from '@supermdguy/tuxi'
import Vuex from 'vuex'
import { fetchItems } from './api'

const store = new Vuex.Store({
  state: {
    items: [],
    fetchItemsTask: tuxi.task(fetchItems)
  },

  mutations: {
    SET_ITEMS(state, items) {
      state.items = items
    }
  },

  actions: {
    async fetchItems({ commit, state }) {
      const items = await state.fetchItemsTask.start()
      commit('SET_ITEMS', items)
    }
  }
})

tuxi.config.vuexStore = store
// Now, you can access $store.state.fetchItemsTask in your components!

Contributing

Tuxi is currently in alpha, so any suggestions or contributions are appreciated. I'm still not 100% sure about the API, so comments on how to make it cleaner/simpler are welcome.

Logo made by freepik from www.flaticon.com