Iniz: Makes ReactJS actually reactive

IniZio — Tue, 08 Nov 2022 11:14:24 +0000

Iniz is a state library that brings reactivity to ReactJS.

Motivation

ReactJS is a view library that uses "Push" strategy to detect changes and apply to actual DOM.

For developers to "push" state through components, different patterns such as HOC, render-props, Context are introduced.
These top-down approaches all have different drawbacks such as extra re-renders and "Provider Hell".

Iniz takes a different approach by treating ReactJS "Component"" as "Effect" and variable update as "Exception" in FP.

When a ReactJS "Component" is first rendered, Iniz collects its dependencies automatically and trigger re-render when the dependencies are updated.

Primitives

Iniz provides a few primitives to describe state: atom/state, effect and computed.

atom

To create a state, call atom() with first argument as initial value.

If you use TypeScript, Iniz already infers the inital value as type. You can optionally pass in a type as generic.

You can then call an "Atom" as function to get it's value. To update it, simply pass the value in the function call.

effect

After an atom is declared, it's value can be tracked with an effect.

effect() accepts function as argument and executes it once immediately.

During execution, it collects all atom's used, and triggers again whenever the atom's are updated.

computed

You can also combine atoms to become a computed value.

computed accepts a function as well. But unlike effect, it returns an atom with computed value.

React

To use Iniz primitives in ReactJS, simply replace @iniz/core with @iniz/react and replace effect with a component.

Souce code is available on inizio/iniz

Why Reim is not just another Redux

IniZio — Fri, 17 Aug 2018 03:56:23 +0000

https://medium.com/@newman.kcchow/why-reim-is-not-another-redux-17ff159ade55

DEV Community: IniZio