Nalanda State Management

Why?

Nalanda State Management (NSM) was created to provide a scalable state management solution independent of React or other UI libraries. While developing Bangle.io (opens in a new tab), I found that many existing solutions, though effective for simple apps, struggled as app complexity grew due to their UI framework dependencies.

Current state management tools often face challenges such as:

• UI Framework Dependency: Tying state management to a specific UI framework.
• Deriving State: Limited support for deriving state efficiently.
• Handling Side Effects: Insufficient methods like React.useEffect that are too DOM-centric.
• State Dependencies: Ignoring the need to manage state interdependencies.
• Encapsulation: Difficulty in keeping parts of the state internal.
• Legacy Issues: Outdated API structures.
• Typescript Support: Inadequate first-party Typescript support.
• Intuitive: Some modern libraries compromise intuitiveness for brevity.

While some libraries address a few of these concerns, NSM offers a comprehensive solution, aiming to tackle all these challenges.

How?

Drawing from atomic state management systems like Angular signals, Solid signals, Jotai, and Redux, NSM integrates their best aspects while ensuring an intuitive API.

Example: Fetching and Storing Data

With NSM, fetching data and updating state is straightforward:

import { cleanup, createKey } from '@nalanda/core';
 
// key helps us build rest of the pieces in a type safe manner
const key = createKey('login-user', []);
 
// initialize a state field
const isLoggedInField = key.field(false);
 
// effect is a function that runs when the state changes
key.effect((store) => {
  // .track ensures effect is only run when `isLoggedIn` changes
  const isLoggedIn = isLoggedInField.track(store);
 
  if (!isLoggedIn) {
    const abort = new AbortController();
    // cleanup is called before the effect is run again
    cleanup(store, () => {
      abort.abort();
    });
 
    await fetch('https://login-user.com', { signal: abort.signal });
  
    store.dispatch(
      // update the state
      isLoggedInField.update(true)
    );
  }
});

1. Encapsulating Effects: Forget the lengthy useEffect hooks. With NSM, effects are high-level, freeing you from tying them to specific UI components. Your UI components remain oblivious to any background effects, enhancing encapsulation and separation of concerns.

2. Auto tracking: NSM eliminates the hassle of handling hook dependencies. You'll appreciate the balanced mix of magic and explicitness. Only values you track by doing const { x } = slice.track() get tracked. The next run of effect will be triggered only when these one of the tracked values change.

3. Cleanups: Introduce a cleanup call immediately after declaring a resource. This will help reduce the useEffect callback hell.

More!

This is a very high level summary. Dive into our documentation to see how Nalanda can enhance your development, improving your app's predictability and scalability.

- ❤️ Kepta (opens in a new tab)