This Library is still in v0.x and API may change.
README is incomplete 🔨
Dead Simple, Reactive, Blazing Fast Global State Management for React
Features
☢ Deeply Reactive, Mutate the State directly !
⚡ Blazing Fast: Fastest State Management Library !
😍 Dead Simple API
♻ Super Efficient : No Extra Re-Renders
radioactive-state
+ All the features of🛠 Installation
npm i radioactive-store
🧾 Note
radioactive-store
is a superset of radioactive-state. radioactive-state is a powerful API that aims to replace useState
hook, while radioactive-store aims to provide both local and global state management. It contains radioactive-state's useRS
hook for local state management, as well as other APIs for global state management
createState
☢ Create global state with create a reactive global state and attach it to window as window.state
by calling createState
Components will then be able to use the global state via window.state
so its important to create the global state before rendering the App
Example
ReactDOM;
📂 Using the global state in components
global state of app is available not only to component but anywhere as window.state
When a component uses some part of window.state
in a component to render UI, we have to re-render that component when that part of state changes. To do that we use a $
function to create a dependency
$
function takes one or more strings that represents parts of window.state
the component depends on to render it's UI. This is used to re-render the component when any of these parts changes
Example
if Foo
component's UI depends on window.state.a
and window.state.b.c
, declare this dependency using $
like this:
const Foo = { return <> <div> windowstatea </div> <div> windowstatebc </div> </>}
Note that you only need to include the parts in dependency which the UI ( jsx
) depends on not the component as a whole. for example if Foo uses window.state.x.y
but does not use them in jsx, then they do not need to be included in dependency
⚡ Updating global state
radioactive-store
's state is deeply reactive and is available anywhere in code as window.state
. To update the global state, you just directly mutate window.state
and components that needs to re-render will re-render automatically
You can mutate
window.state
not only from components but from any piece of code and even from browser's console !
🧁 Counter Example
// index.jsimport createState from 'radioactive-store' ;
// Counter.jsimport $ from "radioactive-store"; const increment = windowstatecount++ const Counter = ; return <div => statecount </div>;
as the increment
mutates global state, it can be defined outside of Counter component. It's always better to define the functions outside of component whenever possible for better performance, because functions defined inside of components are re-created every time the component is rendered.
👨🎤 Global Actions
creating actions is completely optional and you shouldn't create actions until it's necessary.
In radioactive-store, an action is a function that mutates the window.state
. So from our previous example, increment
is an action
In our previous counter example, I defined the increment
function (action) in Counter.js but if increment needs to be used in other components, we should store this action globally in window object so that it is globally available just like window.state
radioactive-store does not have any opinions about how you do this, So you can do this however you like.
For example, I like to do this:
I like to save actions in window.actions
and put similar actions together in an object for example window.state.count
related actions stored in window.actions.count
object:
// index.js windowactions = count: windowstatecount++ windowstatecount = value windowstatecount = 0 ReactDOM
And then any component can use these actions like this
const Counter = const increment = windowactionscount return <> ... </>
To be Continued ...
I am currently working on README ...