get-set-immutable

get-set-immutable is a lightweight js utility for managing state in JavaScript applications. It provides a simple API for updating state and reacting to state changes similar to immer.

Installation

You can install get-set-immutable via npm:

npm install get-set-immutable

Usage

Check out the example along with benchmarks here:

import { getset } from "get-set-immutable";

// Create a get-set-immutable instance with initial state
const state = getset({ count: 0, address: { street: "" }, countDoubled: 0 });

// Subscribe to state changes and log the count whenever it changes
state.subscribe((changes) => {
  console.log("State changed:", changes);
});

// Update the count state
state.set({ count: 1 });
state.set((state) => {
  state.address.street = "new street";
});

// react to specific changes
state.react(
  (state) => {
    state.countDoubled = state.count * 2;
  },
  // pass a function as second param that returns dependency array
  (state) => [state.count]
);

API

getset(initialState: object): object

Creates a new get-set-immutable instance with the provided initial state.

• initialState: An object representing the initial state.

Returns an object with the following methods:

• set(newState: object | (currentState: object) => object): void: Updates the state with the provided new state object or a function that returns a new state object based on the current state.

• subscribe(callback: (changes: object) => void): void: Subscribes to state changes. The callback function will be called whenever the state changes, and it receives an object containing the changes.

• unsubscribe(callback: (changes: object) => void): void: Unsubscribes from state changes.

• react(effectFn: (state: object) => void, dependencyArrayFn: (state: object) => string[]): void: Similar to React's useEffect. It takes an effect function and a dependency array function. The effect function is called when the dependencies change.

Examples

Subscribing to State Changes

// Subscribe to state changes
getset({ count: 0 }).subscribe((changes) => {
  console.log("State changed:", changes);
});

Updating State

// Update the state
getset({ count: 0 }).set({ count: 1 });
// OR
getset({ count: 0 }).set((state) => state.count++);

Reacting to State Changes with Dependencies

// React to state changes with dependencies
getset({ count: 0 }).react(
  (state) => {
    console.log("Count changed:", state.count);
  },
  (state) => [state.count]
);