Introduction

Intuitive state management for React applications with first-class TypeScript support. It offers both global stores and collection management with minimal boilerplate.

Installation

npm i finalstore

Quick Example

import { createStore } from 'finalstore';
 
const settings = createStore({
  states: {
    theme: 'light',
    notifications: true
  },
  actions: {
    toggleTheme: (state) => {
      state.theme = state.theme === 'light' ? 'dark' : 'light';
    }
  }
});
 
function App() {
  const theme = settings.use((s) => s.theme);
 
  return (
    <div data-theme={theme}>
      <button onClick={() => settings.dispatch('toggleTheme')}>
        Toggle Theme
      </button>
    </div>
  );
}

Features

Type Safety

Full TypeScript support with type inference for states and actions

Collection Management

Efficient handling of dynamic collections with individual item subscriptions

Zero Config

No providers needed for global stores, just create and use

DevTools Integration

Built-in Redux DevTools support for debugging

Core Concepts

  • States: Global state management for app-wide data
  • Collections: Map-based state management for dynamic data sets
  • Scoped State: Component-level state isolation
  • Type Safety: First-class TypeScript support

Why FinalStore?

  • 🎯 Simple API: Intuitive methods that feel natural in React
  • 🔒 Type Safe: Built with TypeScript for robust development
  • 🎮 DevTools: Built-in Redux DevTools support
  • 🔄 Reactive: Automatic updates with granular subscriptions
  • 🎨 Flexible: Global, collection, and scoped state patterns
  • 🚀 Performant: Optimized renders with deep equality checks

On this page