https://github.com/superMDguy/tuxi

✨ White glove service for your async needs
https://github.com/superMDguy/tuxi

async react redux state-management vue vuex

Last synced: about 2 months ago
JSON representation

✨ White glove service for your async needs

• Host: GitHub
• URL: https://github.com/superMDguy/tuxi
• Owner: superMDguy
• License: mit
• Created: 2018-08-10T02:40:36.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-15T03:14:27.000Z (almost 6 years ago)
• Last Synced: 2024-11-22T03:32:44.523Z (about 2 months ago)
• Topics: async, react, redux, state-management, vue, vuex
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tuxi
• Size: 154 KB
• Stars: 14
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  

  

  

  

  



# Tuxi

_:sparkles: White glove 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! :relieved:. For more details about the motivation for tuxi, check out this [article](https://hackernoon.com/a-solution-to-async-boilerplate-in-javascript-2fa717801c3b) I wrote.

## Installing

### NPM

```bash

npm install --save tuxi

```

### CDN

Tuxi can also be used directly in the browser through a babel-transpiled and minified build hosted on unpkg:

```html

```

## Examples

For complete documentation and more examples, see the [docs](docs/readme.md) folder.

### Pure JavaScript

```js

import tuxi from 'tuxi'

import api from './api'

const articlesTask = tuxi.task(api.fetchArticles)

// ⚡ Fire the api call

articlesTask.start()

// The task is immediately set to pending

console.log(articlesTask.pending) // true

// 🌀 The spinning property has a configurable delay

setTimeout(() => console.log(articlesTask.spinning), 1500) // true

// After a while...

console.log(articlesTask.hasValue) // true

console.log(articlesTask.value) // ['New Planet Discovered!', '17 Surprising Superfoods!', ...]

```

## Vue

```js

import tuxi from 'tuxi'

import tuxiVue from 'tuxi/plugins/vue'

import api from './api'

tuxi.use(tuxiVue())

export default {

  data() {

    return {

      articlesTask: tuxi.task(api.fetchArticles)

    }

  },

  computed: {

    articles() {

      return this.articlesTask.value

    }

  }

}

```

```html

<div class="wrapper">

  <div class="empty-message" v-if="articlesTask.empty">

    No articles

  </div>

  <div class="spinner" v-if="articlesTask.spinning">

    Loading articles...

  </div>

  <div class="error-message" v-if="articlesTask.error">

    {{ articlesTask.error.message }}

  </div>

  <ul v-if="articlesTask.hasValue">

    <li v-for="article in articles">

      {{ article.title }}

    </li>

  </ul>

  <button @click="articlesTask.start()">Load Articles</button>

</div>

```

## Contributing

Tuxi is still being actively developed, 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. That said though, I think it's definitely ready to be used for non mission critical applications.

_Logo made by [freepik](https://www.flaticon.com/authors/freepik) from www.flaticon.com_