Simple React state management with Laco

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:

	import { Store } from 'laco'
	// Creating a new store with an initial state { count: 0 }
	const CounterStore = new Store({ count: 0 })

view raw Store.js hosted with ❤ by GitHub

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

	// Getting the state
	CounterStore.get()
	// Setting a new state
	CounterStore.set(() => ({ count: 1 }))

view raw Store.js hosted with ❤ by GitHub

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

	// Implementing some actions to update the store
	const increment = () => CounterStore.set(state => ({ count: state.count + 1 }))
	const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }))

view raw Actions.js hosted with ❤ by GitHub

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.

	import { render } from 'react-dom'
	import { Store } from 'laco'
	import { Subscribe } from 'laco-react'
	// Creating a new store with an initial state { count: 0 }
	const CounterStore = new Store({ count: 0 })
	// Implementing some actions to update the store
	const increment = () => CounterStore.set(state => ({ count: state.count + 1 }))
	const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }))
	const Counter = () => (
	<Subscribe to={[CounterStore]}>
	{(state) => (
	<div>
	<button onClick={decrement}>-</button>
	<span>{state.count}</span>
	<button onClick={increment}>+</button>
	</div>
	)}
	</Subscribe>
	)
	render(<Counter />, document.getElementById('root'))

view raw Counter.jsx hosted with ❤ by GitHub

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.

Comments

[Phil Nash]

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]

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>
}

[Phil Nash]

Ah, cool that you can use it with Hooks too. Thanks!

[Goutam Samal]

how can i store my api data by using laco? i need a example

[Abubaker Elsayed Abuelhassan]

as a developer who came from Vue world and penia, this library is very good for me thanks dude