from Hacker News

Show HN: A new kind of React store

by ziolko on 9/17/24, 9:17 AM with 1 comments

Hey HN!

I am a developer on a break from employment. I want to use this time to recharge and work on projects that I always wanted to do but lacked energy after regular job.

One of the problems that we never solved properly is web application state management. What I want is a library that:

- encourages separating application state and logic from React components

- makes dealing async state dead simple (like react query)

- makes creating derived (computed) state dead simple (like computed properties in vue) including deriving async state

- allows to create reusable logic that can be imported as a library (like react hooks)

- allows to easily compose a few simple pieces of application state into a bigger logical unit that can be developed, consumed and tested separately

I've played with various ideas for the last few years, sometimes going crazy that I couldn't find, or create something meeting all these criteria. Finally, a few months ago something clicked and that's how active-store was born.

I am terrible at writing documentation, but I am good at writing code. Take a look at the store for a simple HN client: https://codesandbox.io/p/sandbox/headless-resonance-dfzgzw. It's just ~100 lines of code with comments. The code handles the most important aspects of loading data from HN. I think this is a good example, because the HN API is quite difficult to work with.

There's more documentation at https://github.com/ziolko/active-store and another project that I used as a playground at https://github.com/roombelt/timeline.

Despite the terrible documentation I encourage you to give it a try. I will be happy to answer your comments here.

  • by tgdude on 9/27/24, 2:19 PM

    Hey just wanted to say that I've been using this for the past week since I saw your post on Reddit and it's honestly been a joy to use and subjectively it feels like it's reduced the friction I usually feel when architecting app state.

    I always used valtio prior to this and while it's good I always disliked having to use react-query separately and never got around to just creating something reusable. activeQuery is great.

    Only minor feedback would be that sometimes the ExcludeMethods type seems to interfere with the expected type on other components and so I have to map or use "as ActualType".

    Thanks for sharing this, I'm definitely reaching for this first on my projects.