React-redux-semaphore

Every Redux store need a suspence...

(a part of restate project)

Only the chosen states will pass! This is a redux part of a React Suspense.

The problem

Sometimes current state of a redux state is not acceptable. Thus you may prefer to use the old one.

For example you did update one data source, but could display (rerender) store only after another datasource will be updated.

Redux semaphore could stop update propagation, providing the old state for nested components. You can use react-redux-restate to join the old state, and the new state down the tree.

Or you can just freeze ☃️ it out.

Let me cite the original Redux documentation:

The original Flux pattern describes having multiple “stores” in an app, each one holding a different area of domain data. This can introduce issues such as needing to have one store “waitFor” another store to update. This is not necessary in Redux because the separation between data domains is already achieved by splitting a single reducer into smaller reducers.

react-redux-semaphore IS that waitFor.

Usage

HOC approach.

import reduxSemaphore from 'react-redux-semaphore';
 
const WillUseOldStateUnlessConditionAreMet = reduxSemaphore((state, props) => isValid(store.importantData))(
  TargetComponent,
);
 
const FreezableComponent = reduxSemaphore((state, props) => !props.isFreezed)(TargetComponent);

Component approach

import { ReduxSemaphore } from 'react-redux-semaphore';
const conditionFreeze = (
  <ReduxSemaphore condition={(state, props) => isValid(store.importantData)}>
    <TargetComponent />
  </ReduxSemaphore>
);
 
const propFreeze = (
  <ReduxSemaphore locked>
    <TargetComponent />
  </ReduxSemaphore>
);

Licence

MIT