DEV Community

Ryota Murakami
Ryota Murakami

Posted on • Updated on

I Created React AppState! πŸ€—

Added Sep 17 2020

⚠️ This post is outdated already!

Please look Announcement about @laststance/use-app-state instead.

=======================================

Alt Text

Why React doesn't provide straightforward way to get/set value without Component hierarchy? πŸ€”

I saw Andrew Clark opened PR that get/settable context feature once but there is no exists it in the current Context.

I guess there is any complex circumstances barrier so I wanna investigate past PR discussion. πŸ•΅οΈβ€β™‚οΈ

Anyway, I created straightforward library that simple combination of context, state, hook to make get/settable context aka you know, just global store.
Get by πŸ˜†: https://github.com/ryota-murakami/react-appstate

Thank you for reading my poor English post! β˜•οΈ
Welcome comment feel free If you know more better English, If you know more tech things, or other your special πŸ˜€πŸš€

Related Posts

Discussion (8)

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 • Edited on

so cool! I'll give it a try the next time I work on react🌻 Good job :)

Collapse
malloc007 profile image
Ryota Murakami Author

Thank you so much!
I'm so glad to hear that πŸ€—

Collapse
robbiegm profile image
RobbieGM

You could also use redux for this though.

Collapse
malloc007 profile image
Ryota Murakami Author

Redux is also nicer way, Thank you!

Collapse
atthoriq profile image
At Thoriq

cool! i'll try it soon. but can you share how it differs from redux?

Collapse
malloc007 profile image
Ryota Murakami Author

Originally I'm fan of Redux! So I could describe with long text containing trivial thing...
We call Redux in React world generally, that's combined 2 another library "React" "Redux" by "react-redux".

So, Redux(combined React) manage global value based on Flux essence. you know Dispatch Named Action with payload...

My React AppState has nothing to do with Redux.
Which constructed React build-in feature "state/context/hooks".

Thank you, this is great question I think.
I should start write more straight to understand post with sample code πŸ‘¨β€πŸ’»

short answer is... React AppState designed set/get direct values 🌍

import { useAppState } from '@ryotamurakami/react-appstate'

const MyComponent = () => {
  const [appState, setAppState] = useAppState()

  function toggleDarkTheme() {
    setAppState({ isDarkTheme: !appState.isDarkTheme})
   }

   return (<button onClick={toggleDarkTheme}>{appState.isDarkTheme ? 'Disable DarkMode?' : 'Enable DarkMode!' }</button>)

}

Collapse
atthoriq profile image
At Thoriq

it seems very simple. i am currently developing react project with redux as its state management and i am a newbie here. i should probably try yours soon! thank you for the explanation :)

Thread Thread
malloc007 profile image
Ryota Murakami Author

Your welcome! πŸ€—