DEV Community

Cover image for Simple React state management with Laco

Simple React state management with Laco

Deam on January 21, 2019

This is cross-post from my medium article: https://medium.com/@Deam/laco-intro-5db2077ec829. Laco is a simple and powerful state management solutio...
Read full post
Collapse
 
philnash profile image
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>
)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
deam profile image
Deam • • 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>
}
Collapse
 
philnash profile image
Phil Nash •

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

Collapse
 
goutamsamal9 profile image
Goutam Samal •

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

Collapse
 
bokarios profile image
Abubaker Elsayed Abuelhassan •

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