@storybook/store

What is @storybook/store?

@storybook/store is a package that provides the core state management functionality for Storybook. It helps manage the state of stories, including their parameters, args, globals, and more. This package is essential for maintaining the state consistency and reactivity of Storybook's UI components.

What are @storybook/store's main functionalities?

State Management

This feature allows you to create and manage the state of your stories, including their parameters, args, and globals. The code sample demonstrates how to create a store, set its state, and retrieve the current state.

import { createStore } from '@storybook/store';

const store = createStore({
  stories: {},
  parameters: {},
  args: {},
  globals: {}
});

store.setState({
  stories: { 'example-story': { id: 'example-story', name: 'Example Story' } },
  args: { 'example-story': { arg1: 'value1' } }
});

console.log(store.getState());

Reactive State Updates

This feature allows you to subscribe to state changes and react to updates. The code sample demonstrates how to subscribe to state changes and log the updated state whenever it changes.

import { createStore } from '@storybook/store';

const store = createStore({
  stories: {},
  parameters: {},
  args: {},
  globals: {}
});

store.subscribe((state) => {
  console.log('State updated:', state);
});

store.setState({
  args: { 'example-story': { arg1: 'new-value' } }
});

Parameter Management

This feature allows you to manage parameters for your stories. The code sample demonstrates how to set parameters for a story and retrieve them from the store.

import { createStore } from '@storybook/store';

const store = createStore({
  stories: {},
  parameters: {},
  args: {},
  globals: {}
});

store.setState({
  parameters: { 'example-story': { param1: 'value1' } }
});

console.log(store.getState().parameters);

Other packages similar to @storybook/store

redux

Redux is a popular state management library for JavaScript applications. It provides a predictable state container and is often used with React. Compared to @storybook/store, Redux is more general-purpose and can be used for a wide range of applications, not just Storybook.

mobx

MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming. It is more flexible and less opinionated than Redux, making it easier to integrate with various frameworks. Like Redux, MobX is more general-purpose compared to @storybook/store.

zustand

Zustand is a small, fast, and scalable state management solution for React. It provides a minimalistic API and is easy to use. Zustand is similar to @storybook/store in that it is lightweight and focused on simplicity, but it is designed specifically for React applications.

README

The contents of this package have moved to @storybook/preview-api. Please update your import.

This package will no longer be released as part of the 8.0 release of storybook.

Changelog

7.0.24

• CLI: Parse pnp paths in storybook metadata - #23199, thanks @yannbf!
• Dependencies: Pin file-system-cache to 2.3.0 - #23221, thanks @JReinhold!
• Svelte: Support v4 - #22905, thanks @JReinhold!