An npm package that provides a simple state management tool for React built with RXJS.

Overview

react-rxjs-state-management

This is a simple npm package to create a React state management tool that uses BehaviorSubject from rxjs.
If you want to check how it works, here is a little demo.
Special mention to Iskander Samatov who wrote this great article that helped me to polish some things that I was not doing properly when subscribing.

How to use it?

In your React's app root folder run npm i react-rxjs-state-management to install all the dependencies.

Now, in the src directory create a folder called Store (we are going to place here our states), and inside this Store folder we will create a store.js file.

Let's try to create a counter.

In the store.js file:

import createStore from 'react-rxjs-state-management';

const counterHandler = { // In the section `The state handler` you can find more about it
  name: 'counter',
  defaultState: 0,
  setter: function (state, payload) {
    return state + 1;
  },
};

export default createStore([counterHandler]); // Notice that we have to place our states in an array

With this config done, our store has been built. The createStore function creates a useStore hook that can be used anywhere in our app.

The useStore hook returns an object that contains storeStates (an object with all the created states) and methods (an object with all the setter functions).

To access the different states and their setters we can do this:

import useStore from './Store/store';

export default function Button() {
  const { methods, storeStates } = useStore();
  return (
    <>
      <button
        onClick={() => {
          methods.setCounter(); // (**)
        }}
      >
        Increment
      </button>
      <h1>{storeStates.counter}</h1> // (*)
    </>
  );
}

(*) Notice that all the states can be accessed with the name that we have given it previously.
(**) In the same way, all the setter functions can be accessed with: set + given name (i.e., in camelCase).

The state handler

The state handler is an object that must have these 3 entries:

  • name: The state's name (you will use it to access its value).
  • defaultState: The default value of the corresponding state.
  • setter: The function that will handle all the state updates. This function needs to return always the next value. It takes two arguments:
    • state: The value of the previous state.
    • payload: The argument passed when the setter method is invoked.

If you find any issues, feel free to make a PR!

Thanks! 😉

You might also like...
tiny state management for react with hooks

a simple state management for react using hooks purpose In some simple project, there are some state management requirement, but redux is too heavy to

A hooks-based lightweight React library for state management

React async states A naive lightweight React library for managing state. What is this ? This is a library for decentralized state management in React.

A new react state management framework
A new react state management framework

A new react state management framework System functions 1. Simple State A simple state management tool that looks similar to recoil, used to manage sc

A state management library that follows the React component model

🪓 klyva Scalable state management for React. Minimal API, with reactive, composable and decomposable state! 📺 10 minute tutorial How to Create an at

📠 React custom hook for persist state management
📠 React custom hook for persist state management

Little State Machine State management made super simple ✨ Features Tiny with 0 dependency and simple (715B gzip) Persist state by default (sessionStor

BitAboutState - Tiny and powerful React hook-based state management library
BitAboutState - Tiny and powerful React hook-based state management library

🚀 Tiny and powerful React hook-based state management library. 100% Idiomatic React.

Haiku - A simple and lightweight React library that provides a large number of hooks and utilities

Haiku - a simple & lightweight React library with the goal of saving you time by offering a large collection of hooks & utilities

React Class State Hook - Automatically generate CSS class names and modifiers based on your component's state

React Class State Hook Automatically generate CSS class names and modifiers based on your component's state.

Simple package to use Socket.io with React hooks.

Simple package to use Socket.io with React hooks.

Comments
📦 npm package React Custom Hooks

?? npm package React Custom Hooks

React-Tool 4 Apr 17, 2022
React hooks for RxJS

React hooks for RxJS Installation Demo Apis useObservable useEventCallback Installation Using npm: $ npm i --save rxjs-hooks Or yarn: $ yarn add rxjs

LeetCode Open Source 2.1k Dec 28, 2022
Recoil provides a fast and flexible way to share state across components with React Hooks Api.

umi-plugin-recoil A plugin for [email protected] to help you set RecoilRoot. What is Recoil? Recoil provides a fast and flexible way to share state across com

肥康 3 Jul 19, 2022
The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate The simple but very powerful and incredibly fast state management for React that is based on hooks. Why? • Docs / Samples • Demo application

Andrey 1.5k Jan 3, 2023
State management that tailored for react, it is simple, predictable, progressive and efficient.

English | 简体中文 ⚡️ State management that tailored for react, it is simple, predictable, progressive and efficient. ?? Introduction Concent is an amazin

cencentjs 1.1k Jan 7, 2023
A simple state management library for anti-flickering smooth react page loading experience.

use-loading-steps A simple state management library for smooth react page loading experience. Install yarn add use-loading-steps # or npm install --sa

Chi Chang 3 May 12, 2022
A state management library for React with built-in undo, redo, and persistence.

Out of nowhere! A state management library for React with built-in undo, redo, and persistence. Built on Zustand.

Steve Ruiz 211 Nov 7, 2022
Tiny utility package for easily creating reusable implementations of React state provider patterns.

react-state-patterns Tiny utility package for easily creating reusable implementations of React state provider patterns. ?? react-state-patterns makes

Michael Clayton 16 Nov 8, 2022
React Hook for state management with profunctor lenses

Profunctor State Hook React Hook for state management with Profunctor Optics A simple and small (2KB!) approach to state management in React using fun

André Staltz 335 Dec 27, 2022
A state management library for React, Vue.js, Angular and vanilla javascript

Diffx Introduction Diffx is a state management library that focuses on being easy to learn and use, and to offer a great development experience at any

Joachim Bjørge 51 Dec 29, 2022