Redux and Mobx

Composi provides a convenient way to manage a component's state through use of its setState method. However, you may prefer to have a dedicated library manage state for your components.

Bare in mind that if your component is not very complicated or big, it might not make sense to use a third party solution for state management. However, it your app starts to grow in size and complexity, you might want to consider Redux or Mobx. Of course, there are other solutions as well, such as NuclearJS, RxJS etc.

There are two popular solutions for state manage: Redux and Mobx. We will take a look at using them with Composi. If you are already comfortable using these, just give this a skim to see how to update components with them.

Redux

To use Redux with Composi, you'll need to import it into whatever file you want to use it. Just for the purpose of showing how to integrate these two, we are going to use a very simple counter component. For Redux we will need to create our reducers, action creator and a Redux store. Our component will have have two buttons, one on either side. Licking the minus will decrease the counter value, clicking the plus will increate the value. To integrate the Composi component with Redux, we'll need to assign the Redux store to the component's state.

Notice that we're limiting INCREMENT so that you can't go over 20, and DECREMENT so that you can't go below 0:

const { h, Component } from 'composi'
const { createStore } from 'redux'

// Reducer:
function count(state=0, action) {
  switch(action.type) {
    case 'INCREMENT':
      if (state > 19) return 20
      return state + 1
    case 'DECREMENT':
      if (state < 1) return 0
      return state - 1
    default:
      return state
  }
}

// Action Creators:
const increment = () => {
  return {
    type: 'INCREMENT'
  }
}

const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

// Create Redux store:
const store = createStore(count)

And here's the Counter component integrated with the above Redux reducers and actions:

See the Pen Composi & Redux by Robert Biggs (@rbiggs) on CodePen.

This was a trivial example of using Redux with Composi. Please consult to learn more about how Redux can solve your state management needs.

Mobx

Redux requires quite a bit of boilerplate to work: reducers, action creators, stores, etc. Mobx is much simpler. We are only going to need to import observable and autorun. Mobx has many other useful functions, but we don't need those here.

With Mobx, we create an observable that contains the state for the counter and we assign that to the component's state. After that, all manipulationg of component state is actually being done with the Mobx store. And we use Mobx autorun to tell Mobx to update the component when the Mobx store changes.

Here's the intial Mobx setup for our counter:

const {h, Component} from 'composi'
const { observable, autorun } from 'mobx'

const store = observable({ count: 0})

And here's our counter using Mobx for state management:

See the Pen Composi 1.0.0 & Mobx by Robert Biggs (@rbiggs) on CodePen.

Of course, Mobx has many more useful and powerful features. This was just a trivial example. Consult the Mobx documentation to learn more about how Mobx can solve your state management needs.

Composi DataStore

There is an NPM module called composi-datastore that provides an external dataStore and custom version of Composi Component class. This allows you to create stateless class Components whose state is handled by the dataStore. Visit its dedicated tutorial to learn more.