react.js – React state management design pattern new approach thoughts


Hey people on the internet!

I do not know where to share my new npm package so I am asking you do you know of a good place to share my package?

Also I would really appreciate if you take a look on it and give me your honest opinion on it react-spear

In short the goal of this package is to make state management more appealing then redux/MobX.
It uses an object of store that contains Subjects that can subscribe to global value change and synchronize with local state.

I have made an effort to contribute to the developers community with this package and I hope it is a good one.

Please share with me your thoughts

If you have a counter like this:

src/Counter.(jsx/tsx)

import React from 'react';
import { Down } from './Down';
import { Up } from './Up';
import { Display } from './Display';

export const Counter = () => {
  return (
    <div>
      <Up />
      <Down />
      <Display />
    </div>
  );
};

That takes an Up and Down buttons compnent that needs to share their state.
You will have a store like this:

src/store.(js/ts)

import { Subject } from 'react-spear';

export const Store = {
  counter: new Subject(0),
  // You can add Some other values here to the store,
  // and even an entire Store object to be nested here, whatever you want.
};

The Down and Up components should look like this:

src/Up.(jsx/tsx)

import React from 'react';
import { useSensable } from 'react-spear';
import { Store } from './store';

export const Up = () => {
  const count = useSensable(Store.counter);
  return <button onClick={() => Store.counter.broadcast(count + 1)}>Up {count}</button>;
};

src/Down.(jsx/tsx)

import React from 'react';
import { useSensable } from 'react-spear';
import { Store } from './store';

export const Down = () => {
  const count = useSensable(Store.counter);
  return <button onClick={() => Store.counter.broadcast(count - 1)}>Down {count}</button>;
};

And the Display component will look loke this:

src/Display.(jsx/tsx)

import React from 'react';
import { useSensable } from 'react-spear';
import { Store } from './store';

export const Display = () => {
  const count = useSensable(Store.counter);
  return (
    <div>
      <div>Count is {count}</div>
    </div>
  );
};

Explanation

  • When creating the store you are creating a subscribable object that can listen to changes.

  • When using the broadcast method(you can help me think other names if you don’t like this one),
    you emit the next value of the state, actualy like setState but globally.

  • Then with the useSensable hook you are sensing the changes from the store(listening to broadcast event of that specific subject).
    Inside it uses useState to manage the update of the incoming new value,
    and useEffect to manage subscription to that value.

  • So everytime you broadcast a new value every component that consume that value via useSensable
    are getting rerendered with the new value.

Hope it make sense because it does to me.