Rxjs store for react state management

Usage no npm install needed!

<script type="module">
  import 21epubReactRxjsStore from 'https://cdn.skypack.dev/@21epub/react-rxjs-store';



Rxjs store for react state management

NPM JavaScript Style Guide Travis (.com) Codecov


This package only provide an opt for tiny or medium react state management . Not replace the redux or context reducer ecosystem.

For react > 16.8.0

A solution for react state management .

Store state can be acquired anywhere through store.getState() synchronously.

Provide useRxjsStore Hooks for Components State Usage.


  • Easy-to-use
  • Fully TypeScript
  • No contextor reducer required
  • Immutable by immer
  • Async state flow by rxjs


npm install --save @21epub/react-rxjs-store


// store.ts : Store Definition

import RxjsStore, { RxjsStoreReducerParams } from '@21epub/react-rxjs-store'

interface State {
  count: number

//Reducers Types definition (Recommanded)
interface Reducers<S> extends RxjsStoreReducerParams<S> {
  increment: (state: S, payload: number) => S
  decrement: (state: S, payload?: number) => S

const initState: State = {
  count: 0

const reducers: Reducers<State> = {
  // Sync state management
  increment(state, payload = 1) {
    return { ...state, count: state.count + payload }
  decrement(state, payload = 1) {
    return { ...state, count: state.count - payload }

export default new RxjsStore<State, Reducers<State>>(initState, reducers)
// Component.tsx : Component Hooks Usage

import React from 'react'
import store from './store'

const Component = () => {
  const [state] = store.useRxjsStore()
  const increment = () => {
  const decrement = () => {
  return (
      <div>Create React TS Parcel Library Example 😄</div>
      <div>Count: {state.count}</div>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>

export default Component
// otherUtil.ts : subscribe to store state change

import store from './store'

store.observable$.subscribe( nextState => {

For Details: See Example

Developing and running on localhost

First install dependencies and then install peerDeps for parcel dev:

npm install
npm run install-peers

To run Example in hot module reloading mode:

npm start

To create a parcel production build:

npm run build-prod

To create a bundle library module build:

npm run build


Open the file dist/index.html in your browser


To run unit tests:

npm test


MIT © garryguzy