right-store
Effortlessly manage state in your React applications with this lightweight library. Say goodbye to the complexities of middleware handling and reduces headaches. Use it to seamlessly bind components state to specific values from your data store, ensuring efficient rendering based on data changes. Simplify your React development experience and enhance performance by focusing on the essentials, leaving behind the middleware complexities and reducer intricacies.
How to import:
import { StateProvider } from 'right-store';
First step:
wrap your App in <StateProvider />
:
<StateProvider initialState={{ count: 0 }}>
<App />
</StateProvider>
Counter Example:
import { usePatchState, useWatchState } from 'right-store';
const Counter = () => {
const count = useWatchState(state => state.count)
const patchState = usePatchState()
return <button onClick={() => patchState('count', count + 1)}>{count}</button>
}
API
<StateProvider />
props: initialState: Object
, children
description: Wrap your App to allow using right-store
hooks
useWatchState
props: selector: Function
description: Allows to subscribe to some value at the store, call render on changing value
useGetState
props: -
return value: Function
description: Allows to get state. Unlike useWatchState, it does not call the render
useSetState
props: -
return value: (value: Function | any) => {}
description: Works similar to React useState setState
usePatchState
props: -
return value: (path: 'String | String[]', value: Function | any) => {}
description: Patch state by path or key