fluidstate-preact/reactive-layer

fluidstate-preact/reactive-layer is the Preact Signals-based reactive layer for fluidstate. It bridges the declarative, ergonomic API of fluidstate with the performant reactive engine provided by Preact Signals.

Key Features

• Seamless Integration: Implements the fluidstate's ReactiveLayer, providing atoms, computed values, and reactions powered by Preact Signals' core APIs (signal, computed, effect).

• Enables fluidstate: Once configured, you can use the complete feature set of fluidstate for your state management needs.

Installation

To use fluidstate with Preact Signals, you need to install fluidstate, fluidstate-preact and @preact/signals-core:

npm install fluidstate fluidstate-preact @preact/signals-core

or

yarn add fluidstate fluidstate-preact @preact/signals-core

Usage

To enable fluidstate, you must provide it with the Preact Signals reactive layer. This is a one-time setup at your application's entry point.

import {
  provideReactiveLayer,
  createReactive,
  createReaction,
  runAction,
} from "fluidstate";
import { getReactiveLayer } from "fluidstate-preact/reactive-layer";

// 1. Get the reactive layer from fluidstate-mobx
const reactiveLayer = getReactiveLayer();

// 2. Provide it to fluidstate
provideReactiveLayer(reactiveLayer);

// 3. You can now use the fluidstate API throughout your application
const counter = createReactive({ value: 0 });

createReaction(() => {
  console.log(`Counter value: ${counter.value}`);
});
// LOGS: Counter value: 0

runAction(() => {
  counter.value++;
});
// LOGS: Counter value: 1
 

After this setup, you can use the fluidstate package for all your state management tasks. For more details on createReactive, createReaction, and other features, please refer to the main fluidstate documentation.