mp

mobx-promise

A tiny dependency-free library that makes working with promises in MobX easy.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

6

Maintenance

Last Commit

4yrs ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

mobx-promise

npm (scoped) npm

A tiny library that makes working with promises in MobX easy.

Installing

npm install --save mobx-promise

Simply initialize an observable object with data and promiseState properties, and return a promise from an action decorated with @bindPromiseTo as such:

import { bindPromiseTo } from 'mobx-promise'

class FoodStore {
  @observable pizzas = {
    data: {},
    promiseState: {},
  }
  
  @bindPromiseTo('pizzas')
  @action getPizzas() {
    return fetch('pizza-store.com/api/get')           
  }
}

Now when getPizzas() is called, mobx-promise will update the promiseState property of pizzas with promise's lifecycle events — pending, fulfilled or rejected, and the data property with the result of promise execution.

Exercising control

If you'd like more control on how the promise results are assigned, or if you wish to avoid using decorators, you can use the bindPromise function instead of the @bindPromiseTo decorator.

import { bindPromise } from 'mobx-promise'

@action getPizzas() {
  const pizzaPromise = fetch('pizza-store.com/api/get').then(r => r.json())
    
  bindPromise(pizzaPromise)
    .to(this.pizzas)               
}

This works similar to bindPromiseTo, but allows you more freedom to do any of the following:

Assigning a nested property to the observable

@action getPizzas() {
  const pizzaPromise = fetch('pizza-store.com/api/get').then(r => r.json())
  
  bindPromise(pizzaPromise)
    .to(this.pizzas, (promiseResult) => promiseResult.data.pizzas)                
}

Using the previous state

@action getMorePizzas() {
  const pizzaPromise = fetch('pizza-store.com/api/get').then(r => r.json())
    
  //  Merge / process current result with the previous one
  bindPromise(pizzaPromise)
    .to(this.pizzas, (newResults, oldPizzas) => oldPizzas.concat(newResults))              
}

Returning a promise

@action getMorePizzas() {
const pizzaPromise = fetch('pizza-store.com/api/get').then(r => r.json())
  
  return bindPromise(pizzaPromise)
    .to(this.pizzas)
}

Handling rejection and fulfillment

@action getMorePizzas() {
  const pizzaPromise = fetch('pizza-store.com/api/get').then(r => r.json())
    
  bindPromise(pizzaPromise)
    .to(this.pizzas)
    .then((result) => console.log(result))
    .catch((err) => alert(err))
}

Rendering results

mobx-promise provides the PromiseState enum for convenience in comparing results. You can choose to use "fulfilled", "rejected" and "pending" as strings instead if you wish.

import { Component } from 'react'
import { PromiseState } from 'mobx-promise'

class PizzaApp extends Component {
  render() {
    const { pizzas } = appStore
    
    switch(pizzas.promiseState) {
      case PromiseState.PENDING:
        return <span> Loading yummy pizzas... </span>
       
      case PromiseState.FULFILLED:
        return <ul> { pizzas.data.map(pizzaName => <li> { pizzaName } </li>) }  </ul>
        
      case PromiseState.REJECTED:
        return <span> No pizza for you. </span>
    
    }
  }
}

API

bindPromise

argumenttype
promisePromise

bindPromise.to

argumenttype
observableMobX Observable
selector(newData, oldData)callback

@bindPromiseTo

argumenttype
observableKeystring

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial