DEV Community

Ryota Murakami
Ryota Murakami

Posted on • Originally published at Medium on

const [store, setStore] = useStore(): One Shot React State Management🍸

This post is introduce my library and my take on React State Management.
You can look and try muriatic soon bellow link. Checking hub Out! 😄https://github.com/ryota-murakami/muriatic

I picked UI Library called React. but I’m not sure why I’m struggling State Management now 🤯

Of course I had too, when I started React I read one of too highly advanced Redux project guides/article and had hard time. I remember I can’t update store data to fire dispatch action during first 2 days.

I think that unpleasant tendency will improving soon, or already done.

In those days, We have New Context API and Hooks such as useState(), useContext().
In addition I read “React is a state management library” by Kent C. Dodds and agree with that.

I think there are 2 important facts at 2019 React developer contrast to 2013~2016.

1. Context Official Release for React User, and Released Hooks

There are many ways or option came from above feature about Data Management. According to Dan Abramov tweet, he recommend useReducer() and useContext() Hooks.

Key point is originally React build-in Data Management feature is “Props”, “State” only. Context was an internal hidden feature that was not allow to general developer.

To make State Management library, almost cases required Context.State Management Library was made by only person who has strong knowledge of no document, unstable, no warranty Legacy API.

But In those days, Context is open for everyone and we have straightforward way to implements something named Hooks.

2. Evolution of React Developer Tools

Few days ago, New React Dev Tools was released.
This is so useful, you can see specific Component’s State value, Context Value, what kind of Hooks use to etc..

Alt Text

As a result, we don’t have to rely redux-devtools for instantly debug data value.

Conclusion

while several years,(2013~2016) React Development is influenced and spread out with tightly coupled to sophisticated State Management Library.
As a result new React users were overwhelming to leaning expert advanced abstraction, before coming opportunity to make decision “Is the Library need for me?”.

Even though at running in the last 2010s, we got above straightforward way to data management.

And my library is also just extracted stuff from my handy value store pattern of combination Context and Hooks, no overkill.
muriatic usage is wrap your App

<Provider store={{foo: 100}}>  
 <App/>  
</Provider>

and then call this one into a component function, that’s it.

const [store, setStore] = useStore()

If you had situation such as to get convenient data store instantly, I’m glad you use it to reduce chore time.
https://github.com/ryota-murakami/muriatic

Following phrase is written at the top of React README.

React is a JavaScript library for building user interfaces.

We might be better focus to UI development after get data store from one shot 🍸.

Discussion (3)

Collapse
seanmclem profile image
Seanmclem

Can I only have one provider?

Collapse
malloc007 profile image
Ryota Murakami Author • Edited on

@seanmclem

I'm sorry to late, I made multi provider example on CodeSandbox!
Please check it!

codesandbox.io/embed/muriatic-mult...

Collapse
malloc007 profile image
Ryota Murakami Author

Thank you for your comment!
You can have multiple Provider, when you need vertical components hierarchy though.

I’ll make example and share here comments tomorrow!