Storybook Redux 状态插件

一个 Storybook 插件，可帮助您直接从 Storybook 的 UI 管理和可视化 Redux Toolkit 状态。此插件提供了一个强大的界面，用于在您的故事中调试、操作和跟踪 Redux 状态更改。

致谢

本项目灵感来自并基于 addon-redux 中出色的工作。他们的原始实现为此插件提供了基础。

特性

• 🔍 实时 Redux 状态检查
• 📝 通过 JSON 编辑器直接操作状态
• 📊 使用状态差异跟踪操作历史
• 🔄 状态时间旅行调试
• 🎯 通过 Storybook Controls 控制 Redux 状态
• 🔗 基于路径的状态绑定
• 🔄 故事重新加载之间的状态持久化

要求

核心依赖项

• React >= 18.0.0
• Redux >= 4.0.0
• React Redux >= 9.0.0
• @reduxjs/toolkit >= 2.0.0
• Storybook >= 8.0.0

安装

npm install --save-dev storybook-addon-redux-store

设置

1. 在您的 .storybook/main.ts 中注册插件

import type { StorybookConfig } from "@storybook/react";

const config: StorybookConfig = {
  addons: [
    // ... other addons
    "storybook-addon-redux-store",
  ],
};
export default config;

2. 将 Redux enhancer 添加到您的 store 中

import { configureStore } from "@reduxjs/toolkit";
import { enhancer } from "storybook-addon-redux-store";

const store = configureStore({
  reducer: {
    // your reducers
  },
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(enhancer),
});

3. 使用 withRedux 装饰器将您的故事包装在 Redux Provider 中

// .storybook/preview.ts
import { Preview } from "@storybook/react";
import { Provider } from "react-redux";
import { withRedux } from "storybook-addon-redux-store";

const preview: Preview = {
  decorators: [withRedux(Provider)],
};
export default preview;

4. 将 store 导入到您的 .storybook/preview.ts

import { Preview } from "@storybook/react";
import { Provider } from "react-redux";
import { withRedux } from "storybook-addon-redux-store";

const preview: Preview = {
  decorators: [withRedux(Provider)],
  loaders: [
    async () => ({
      store: await import("./your/store"),
    }),
  ],
};
export default preview;

使用方法

基本状态控制

您可以通过故事参数控制 Redux 状态

import type { Meta } from "@storybook/react";
import { PARAM_REDUX_MERGE_STATE } from "storybook-addon-redux-store";
const meta: Meta = {
  title: "Components/MyComponent",
  parameters: {
    [PARAM_REDUX_MERGE_STATE]: {
      counter: {
        value: 42,
      },
    },
  },
};
export default meta;

将 Controls 绑定到状态

您可以将 Storybook controls 直接绑定到特定的 Redux 状态路径

import { ARG_REDUX_PATH } from "storybook-addon-redux-store";
const meta: Meta = {
  title: "Components/MyComponent",
  argTypes: {
    count: {
      control: { type: "number" },
      [ARG_REDUX_PATH]: "counter.value",
    },
  },
};

特性详解

状态面板

此插件在 Storybook 的 UI 中添加了一个“Redux Store”面板，您可以在其中

• 查看当前 Redux 状态
• 直接编辑状态值
• 将状态重置为初始值

历史面板

“Redux History”面板显示

• 已分发操作的时间顺序列表
• 每个操作的状态差异
• 先前状态和当前状态快照
• 通过加载先前状态进行时间旅行调试的能力

API 参考

参数

• PARAM_REDUX_MERGE_STATE: 将状态与初始 Redux 状态合并
• ARG_REDUX_PATH: 将一个 control 绑定到特定的 Redux 状态路径

导出

import {
  enhancer, // Redux store enhancer
  withRedux, // Storybook decorator
  PARAM_REDUX_MERGE_STATE,
  ARG_REDUX_PATH,
} from "storybook-addon-redux-store";

贡献

1. Fork 仓库
2. 创建您的特性分支 (git checkout -b feature/amazing-feature)
3. 提交您的更改 (git commit -m 'Add amazing feature')
4. 推送至分支 (git push origin feature/amazing-feature)
5. 打开一个 Pull Request

许可证

MIT License