reactive-state-handler

A Cross Framework Javascript State Management Library using rxjs

Install Peer Dependency ( in case not installed already )

  npm i rxjs

Steps to Install

  npm i reactive - state - handler

Example Usage

1. Create a new file (suppose AppStateHandler.js) and initialize your initial state and default export Singleton Class.

import { ReactiveState } from "reactive-state-handler";
 
export default new ReactiveState({
  loggedIn: false,
  user: null,
  darkMode: false,
  jwt: "",
});

1. Import in any file and then you can use any of it's methods & properties listed below

// Used for listening to state changes
AppStateHandler.subscriber$.subscribe((state) => {
  console.log("State Changed", state);
});
 
// Used for setting values in the state
AppStateHandler.setState(values);
 
// Returns current state
const state = AppStateHandler.getState();
 
// Used to reset state back to initial state
AppStateHandler.resetState();

1. Usage with React

Create a custom react hook

import { useReactiveStateHandler } from "reactive-state";
 
export function useAppState(filterKeys) {
  return useReactiveStateHandler(AppStateHandler, filterKeys);
}

Lastly, just use this in your functional component

// Returns only values passed in the filterKeys, use this to reduce unnecessary re renders if other state values changes.
const [{ keyName1, keyName2 }, removeListener, addListener] = useAppState([
  "keyName1",
  "keyName2",
]);
// Returns current state
const [state, removeListener, addListener] = useAppState();