Storeflow

Storeflow is an innovative, zero-boilerplate state management library specifically designed for React applications. Built on native React hooks, Storeflow streamlines state management by eliminating the need for manual actions, selectors, and reducers. This enables developers to handle complex nested states with remarkable ease and efficiency.

Key Features of Storeflow

Magic Setters

Storeflow automatically creates setters for every property of your state, including nested properties, allowing for a significantly reduced amount of boilerplate code. For example:

// Direct setter for nested state
$user_profile_name();
// Direct setter for simple state
$count();

Built-in Middleware

Storeflow includes robust middleware capabilities that let developers intercept and manipulate state changes before they are committed to the store. This feature provides complete control over the update lifecycle, supporting logging, transformation, validation, and more.

Cross-Store Dependencies

Seamlessly orchestrate data flow between different stores. Storeflow allows a store's side-effect to react to changes in other stores, enabling direct updates across stores.

Fully Reactive & DevTools Ready

Using the native useSyncExternalStore hook, Storeflow ensures minimal re-renders and optimal performance, adhering fully to React's concurrent model.

Getting Started

A Storeflow store is initialized by invoking the store() function with an initial state object, which returns a custom React hook that can be utilized within any component. For instance:

const useCounterStore = store({
	count: 0,
	isEven: true,
	settings: {
		step: 1,
		limit: 10,
	},
});

Usage Example

In a component, state properties and corresponding Magic Setters can be accessed as follows:

const {
	count,
	isEven,
	$count,
	$isEven,
	$settings_step, // Nested setter for 'settings.step'
} = useCounterStore();

Handling State Changes

You can manipulate the state directly or utilize updater functions for state that relies on previous values. Here's how:

const handleIncrement = () => {
	$count(count + 1);
	$isEven((prevIsEven) => (count + 1) % 2 === 0);
	if (count === 5) {
		$settings_step(2);
	}
};

Advanced Control with Middleware

Storeflow's middleware functionality allows the interception of updates prior to committing the change to the state, making it essential for validation and transformation processes.

const useAuditStore = store({
	userId: "user-123",
	lastAction: null,
	isFrozen: false,
}).middleware([
	(currentState, incomingUpdate, next) => {
		const auditUpdate = {
			lastAction: new Date().toISOString(),
		};
		next({ ...incomingUpdate, ...auditUpdate });
	},
]);

State Orchestration with Effects

Use the .effect() method to register functions that execute after every successful state update, allowing for side-effect handling and asynchronous tasks. The method also provides a prev getter to access previous state values.

.effect(async ([{ settings }], prev) => {
	const prevLimit = prev('settings.limit');
	if (prevLimit !== settings.limit) {
		await saveToDatabase(currentState);
	}
});

Cross-Store Dependencies in Effects

Register dependencies among Storeflow stores with the .depends() method, enabling one store to react to updates of another.

const useContentStore = store({
	headline: "Hello World",
	viewCount: 0,
}).depends([useThemeStore]);

Storeflow is engineered to enhance the state management experience in modern React applications by reducing boilerplate and increasing clarity in data flow.