Simple React state management with Laco

#react #javascript #state #redux

This is cross-post from my medium article: https://medium.com/@Deam/laco-intro-5db2077ec829. Laco is a simple and powerful state management solution for React and Inferno. Powered by ideas from Redux and Unstated.

Laco consists of three simple ideas

The first idea is the notion of a store. The store handles state and you can have multiple stores. You can create a store like so:

You can get or set a new state on your store:

The second idea is the idea of actions. An action is a function that sets a new state on a store.

The third and final idea is the idea of a Subscribe component. The Subscribe component takes an array of stores as input. The component acts like connect() for those that are familiar with Redux. The difference is that connect() is a higher order component while the Subscribe component uses render props. More on render props here.

That is the general gist of Laco. I hope you find the concepts simple and straightforward.

Conclusion

Laco is very lightweight (around 2kb minified) and is meant to make state management simpler which makes starting new projects more hassle free. Check out the GitHub repository and code sandbox examples.

Top comments (5)

Phil Nash • Jan 21 '19

It continues to surprise me how the React ecosystem works its way through problems like state management. This looks like a nice, understandable way of looking after state (and simpler than Redux in my initial estimation). It also seems to be written similarly to Hooks, aside from needing render props.

What happens when you subscribe to more than one store? Something like this?

const Counter = () => (
  <Subscribe to={[CounterStore, OtherStore]}>
    {(counterState, otherState) => (
      <div>
        // other UI
      </div>
    )}
  </Subscribe>
)

Deam • Jan 22 '19 • Edited

That's exactly how it works :)!

Regarding hooks - I'm testing out how you can use hooks with a store. An example of an up and coming hooks api:

import { Store } from 'laco'
import { useStore } from 'laco-react'

const CounterStore = new Store({ count: 0 })

const Counter = () => {
  const state = useStore(CounterStore)
  return <div>{state.count}</div>
}