roxy-store v1.0.6
Roxy Store for React
Roxy Store is a lightweight state management library for React applications. It provides a simple and efficient way to manage your application's state.
Installation
npm install roxy-store
Usage
Creating a Store
To create a new store, use the createStore
function provided by Roxy Store.
import { createStore } from 'roxy-store';
const initialState = /* initial state value */;
const myStore = createStore(initialState);
Subscribing to Store Updates
You can subscribe to updates in the store using the _subscribe
method.
const myCallback = (newVal, oldVal) => {
// Handle store update
};
myStore._subscribe(myCallback);
Unsubscribing from Store Updates
To stop receiving updates, use the _unsubscribe
method.
myStore._unsubscribe(myCallback);
Accessing Store State
The current state of the store can be accessed using the store
property.
const currentState = myStore.store;
Hook for Store State in Components
To use the store state within a functional component, you can use the useStoreState
hook.
import { useStoreState } from 'roxy-store';
const MyComponent = () => {
const [state, setState] = useStoreState(myStore);
// `state` contains the current value of the store
// `setState` is a function to update the store state
};
Updating Store State
To update the store state, use the setStore
function returned by useStoreState
.
const handleButtonClick = () => {
const newValue = /* new value */;
setState(newValue);
};
Example
import React from 'react';
import { createStore, useStoreState } from 'roxy-store';
const CounterComponent = () => {
const counterStore = createStore(0);
const [count, setCount] = useStoreState(counterStore);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<button onClick={increment}>Increment</button>
<span>Count: {count}</span>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default CounterComponent;
In this example, a simple counter component is created using Roxy Store. The store is initialized with an initial value of 0
. The useStoreState
hook is used to access and update the store state within the component.