npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

react-retix

v0.2.0

Published

The combination of React and RxJS, that makes state management easier.

Downloads

7

Readme

All Contributors

React RetiX

Demo here

This package is used for state management, it is not intended to become an alternative to Redux. It just provides a different approach to state management in React.

If you're looking for a simple, flexible, effective way to manage the global state of your React application, this package is for you. If you're new to Redux, you're confused with a lot of its concepts such as the store, reducer, action, middleware - Alright, go ahead with React RetiX.

Let's take a look at the detail below:

Competitive benefits:

  • Light-weight
  • Easy to use
  • Simple of architecture
  • Can use any where in your react application, not only in component

Install

npm i react-retix

Built-in

MasterStore
  • For registering a store, the same concept as createStore in Redux
useSubscriber
  • For watching state, the same concept as useSelector in React Hooks + Redux
useEmitter
  • For doing action, updating state, the same concept as useDispatch in React Hooks + Redux

Usage

Register

import React, { useState } from 'react';
import { MasterStore } from 'react-retix';

new MasterStore({ state });

const App = () => {

  return <></>
};

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Watch state

Root (Master store)

import React from 'react';
import { useSubscriber } from 'react-retix';

const App = () => {
  const masterStore = useSubscriber();

  return <></>
};

Children

import React from 'react';
import { useSubscriber } from 'react-retix';

const LoadingIndicator = () => {
  const isLoading = useSubscriber('page.isLoading');

  return isLoading && <Spinner />
};

Update state

Inside component

import React from 'react';
import { useSubscriber } from 'react-retix';

const PostReaction = (post) => {

  const { isAuthenticated } = useSubscriber('user');

  const doLike = () => {
    useEmitter({ isLiked: true });
  }

  return (
    <div>
      { 
        isAuthenticated ? <button onClick={doLike}>Like</button> : <button>Sign in</button>
      }
    </div>
  )
}

Outside component (Either Service, utils or othes)

import { useEmitter } from 'react-retix';

class PostService {
  constructor () {
    //
  }

  getPost () {
    this.api.get('posts').then((data) => {
      useEmitter({ post: data });
    }).catch((err) => {
      useEmitter({ errors: err });
    }).finally(() => {
      useEmitter({ isLoading: false });
    });
  }
}

Others

The usage of tring

To update a state, you can specify the path of an object

useEmitter(val, 'level1.level2.level3.level4');

instead of

useEmitter({ 
  level1: {
    level2: {
      level3: {
        level4: val
      }
    }
  }
});

Both of them works the same, choose a comfortable one base on your use-case.

Deep merge objects

Highly noted that, due to data integrity purpose we decided to use deep merge for updating objects, for example:

Current state

{
  level1: {
    level21: true,
    level22: 'xyz',
    level23: {
      level3: null
    }
  }
}

Update the state with new data

useEmitter({ 
  level1: {
    level21: false
  }
});

The result would be

{
  level1: {
    level21: false, // updated with new value
    level22: 'xyz', // not be removed
    level23: { // not be removed
      level3: null
    }
  }
}

It means all attributes of an object will be persisted as initial values, unless you try to force to remove them all by setting it value to empty object {} or null

Force to remove all attributes

useEmitter({ 
  level1: {} // or null also works
});

The result would be

{ 
  level1: {}
};

Services

React RetiX recommend you to use service to handle business logic of your application.

If you have familiared with Redux, you can imagine that services is the same as what reducers do in Redux architecture.

Please checkout the example for further detail.

Contributing

Pull requests are always welcome!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!