mobx-promise

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

argument	type
promise	Promise

bindPromise.to

argument	type
observable	MobX Observable
selector(newData, oldData)	callback

@bindPromiseTo

argument	type
observableKey	string