CMX - Composable MobX

A library to make MobX easy

          _            _   _        _      _      
        /\ \          /\_\/\_\ _  /_/\    /\ \    
       /  \ \        / / / / //\_\\ \ \   \ \_\   
      / /\ \ \      /\ \/ \ \/ / / \ \ \__/ / /   
     / / /\ \ \    /  \____\__/ /   \ \__ \/_/    
    / / /  \ \_\  / /\/________/     \/_/\__/\    
   / / /    \/_/ / / /\/_// / /       _/\/__\ \   
  / / /         / / /    / / /       / _/_/\ \ \  
 / / /________ / / /    / / /       / / /   \ \ \ 
/ / /_________\\/_/    / / /       / / /    /_/ / 
\/____________/        \/_/        \/_/     \_\/  

Motivation

At Evermind, we partially picked MobX over Redux for building Orulo in order to avoid copious boilerplate. Yet with a large app, boilerplate inevitably occurs. Composable MobX (CMX) aims to reduce some of this boilerplate, and make the process of working with MobX cleaner and easier along the way.

We also hope that this project will encourage some discussion about how to structure MobX projects that are a little larger than the standard TodoMVC.

Caveats, Warnings

• This package assumes certain things about how you structure your API
  • Post is used to create.
  • Put is used to update.
• If you don't like these default assumptions, MobX is designed to be as flexible as possible for you to use anyway. Becuase of a relatively simple codebase and a functional composition architecture (as opposed to rigid classes), CMX can be adapted to your needs with little effort. Even if you don't use this codebase specifically, we hope it gives you some new ideas on how to structure your MobX architecture. Have a read of the code!

Usage

• You know the drill: yarn add composable-mobx to install.
• This package uses axios for interacting with your API (at least until other options are added). It assumes that you have configured axios elsewhere in your app. Make sure you set the base API and authorization headers like so somewhere in your code:

  axios.defaults.baseURL = 'https://api.example.com';
  axios.defaults.headers.common.Authorization = AUTH_TOKEN;

Function Documentation (TODO)

Development

• To develop locally, use yalc
• Publish updates to NPM when ready