Comment by binocarlos | Hacker News Reader

Comment by binocarlos | Hacker News Reader

I use redux a lot and love the way you can reason about the state of the app from a single object - which opens up all sorts of useful things like time-travel etc.

However - after having plugged in a lot of reducers - the boilerplate code required to do simple stuff becomes a real bore. I've since compromised by using a simple `key-value store` reducer that I can write new values to without needing a new reducer with accompanying actions.

I'm sure this is not how it's supposed to be used but nobody ain't got no time for making all that boilerplate just for a button :-)

Like I say - it's worth it though - it's amazing how large frontend apps "just work" once you have the state in a single place and the UI rendering from it and it alone.

I created a class compatible with Redux time travel and debugging tools that works like this (in typescript):

    interface FooState {
      myNumber: number;
      myArray: number[]
    }

    class Foo extends DataModelImpl<FooState> implements 
    IDataModel<FooState> {...}

Then you use it like so:

    const foo:IDataModel<FooState> = new Foo()
    foo.updateState(state => state.myNumber = 10)

Anything that wants to be notified when myNumber changes:

    const callback = (num:number) => {...}
    const unsubscribe = foo.watch(state => state.myNumber,callback);

    ...

    unsubscribe()

I've bound this to React, Vue and other view libraries. It even works properly with nested objects.

Drawback is that it uses Observers. I believe the next "killer state library" will use a pattern like what I've described above.

.watch? Reminds me of angularjs :)

Hah, that's right :)

Reply on news.ycombinator.com