Introducing Easy State - A library that replaces React's setState with plain JavaScript


(Miklos Bertalan) #1

Hi everyone!

I made a small experimental project that makes React’s native state management more developer friendly, instead of moving it to an external library - like Redux or MobX. It replaces setState with plain JavaScript and auto binds your component’s methods to save you from boilerplate. The GitHub repo is here: https://github.com/solkimicreb/react-easy-state.

The underlying observer system is mature, but the React port is a new experimental project. Contributions and feedback would be appreciated.

Thanks!


(Nehal Kapadia) #2

Hey Miklos, my question is not related to react-native state but reactjs state. I want to define a global state for my whole react application which I can access in any file. Actually I want to define it to hide/show the loader. Can you please help me out?


(Miklos Bertalan) #3

Hi! Easy State supports global state stores since v2 (the current version is v3). This is how you should do it:

  1. Create a global store
import { easyStore } from 'react-easy-state'

export default easyStore({
  isLoading: false
})
  1. Import and use the store as a normal object anywhere in your components
import React from 'react'
import { easyComp } 'react-easy-state'
import store from './store'

function MyComp () {
  return store.isLoading
    ? <Loader />
    : <Content />
}

export default easyComp(MyComp)

You can find more about global state stores here.


(rob2d) #4

This is an awesome idea! Thanks for creating this. I was currently working on a concept as well to model state a bit easier/more succinctly called statefulProps so that we can create simple state oriented functional components, but I also love the opposite approach of removing the overhead for business logic here.


(Miklos Bertalan) #5

I am glad you like it :slight_smile:. Do you have a link to your library or is it still a WIP?


(Edmilinski) #6

I like your react-easy-state with local and global state …
it looks like it re-evaluates only store get methods on data change. if get method is used multiple times in render, it evaluates every time. if its not a store get method, it will not re-evaluate on data change, is that correct ?
I’m a beginner with react, I did not try it with more complicated, deeper data structures. Is there such a demo, example somewhere ?


(Miklos Bertalan) #7

I only have these examples so far: https://github.com/solkimicreb/react-easy-state/tree/master/examples, but I am adding now ones in the next weeks.

Getters - like get propName () {} - work like normal getters, they evaluate every time propName is accessed from the code. Normal properties, do not ‘re-evaluate’. Renders are only triggered once per paint - no matter how many getters and normal props it uses. Generally speaking everything works like normal JS, except for the added reactivity. This is in contrast with other solutions - like mobX - where getters are replaced with cached properties.

I hope this helps, let me know if I didn’t answer you question (:slight_smile: