Abstract

React Lens is a functional state manager for ReactJS. The whole state is divided into separate models. Each model can be associated with a atom or part of a shared state. All models are inherited from the base model, which already has most of the necessary functions, but you can extend it if necessary.

At its core, the lens-js library is used, which can work on different frameworks in the same way. This means that some of your code can be transferred between frameworks.

Example

Original component

const Counter: react.FC = () => {
  const [value, setValue] = useState(0);
  return <button onClick={() => setValue(value + 1)}>{value}</button>;
}

With React Lens.
Just use createStore() and useLens() instead useState() in the component.

const store = createStore(0);

const Counter: react.FC = () => {
  const [value, setValue] = useLens(store);
  return <button onClick={() => setValue(value + 1)}>{value}</button>;
}

You can also create dynamic models, inherit and extend models, work with asynchronous calls, work with local storage, and much more. For more information see manual

Links

Git repository

Manual

NPM package