addon-redux 是一个 Storybook 插件，用于帮助构建使用 Redux 状态的组件的故事。

理想情况下，故事只需要用于非 Redux 连接的组件，而不是容器组件。但是，在为 Redux 应用程序的组件编写故事时，组件通常会将容器作为子组件，这会导致问题。 addon-redux 通过提供装饰器和有用的面板来支持容器组件，从而解决了这个问题。

此文档适用于版本 2，点击此处获取有关设置版本 1 的信息。

演示 使用 Redux 插件的项目。

此插件与 React 版 Storybook 兼容。

功能

• 向 Storybook 添加两个面板：Redux 状态和 Redux 历史记录
• 使用 React Redux Provider 组件包装故事
• 查看和编辑存储的当前状态
• 切换故事时将 Redux 重置为初始状态
• 提供一个故事参数，以便在故事加载时更新存储
• 记录操作并维护时间、操作、先前状态、下一个状态和状态差异
• 支持时间旅行回到先前状态

安装

npm install addon-redux

用法

为了使 React Redux 插件正常工作

• 它必须作为 Storybook 插件注册
• 其存储增强器必须在应用程序的存储中使用
• 存储必须在 preview.js 中导入

注册

与其他 Storybook 插件类似，Redux 插件在使用前需要在 Storybook 中注册。

// .storybook/main.js
module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "addon-redux"
  ]
}

增强器

为了使 Redux 插件能够监听和更改存储，在创建存储时必须使用其增强器，如下所示。

// Simplest use of the Redux Addon Enhancer
import { createStore, compose } from 'redux'
import reducer from './your/reducer'
import { enhancer } from 'addon-redux'

export const store = createStore(reducer, {}, enhancer)

通常，应用程序的存储已经使用增强器。Redux 插件的更真实的存储设置如下所示。它包括常用的中间件增强器以及一些用于演示的中间件。此示例展示了如何将 Redux 增强器与其他增强器一起使用，尽管不同的应用程序之间存储创建代码可能看起来非常不同。

// Realistic use of the Redux Addon Enhancer with other store enhancers
import { createStore, compose, applyMiddleware } from 'redux'
import { enhancer as withReduxEnhancer } from 'addon-redux'
import reducer from './your/reducer'
import createMiddlewareEnhancer from './middlewareEnhancer'
import invariant from 'redux-immutable-state-invariant'
import logger from 'redux-logger'

createMiddlewareEnhancer () => {
  const middleware = []
  if (process.env.NODE_ENV !== 'production') {
    // include other middlewares as needed, like the invariant and logger middlewares
    middleware.push(invariant())
    middleware.push(logger())
  }
  return applyMiddleware(...middleware)
}

const createEnhancer = () => {
  const enhancers = []
  enhancers.push(createMiddlewareEnhancer())
  if (process.env.NODE_ENV !== 'production') {
    enhancers.push(withReduxEnhancer)
  }
  return compose(...enhancers)
}

const store = createStore(reducer, createEnhancer())

export default store

导入存储 (Preview.js)

存储必须在 ./storybook/preivew.js 中导入，以便为故事设置并准备就绪。只要增强器已如上所述设置，此插件就会自动使用 Redux 提供程序包装故事。

这可以通过两种方式完成

1. 在文件顶部同步导入存储

// .storybook/preview.js

const store = require('./your/store')

module.exports = {
  decorators: []
}

2. 使用 Storybook 加载器异步导入存储

// .storybook/preview.js

module.exports = {
  decorators: [],
  loaders: [
    async () => ({
      store: await import('../stories/store'),
    })
  ]
};

参数

使用 Storybook 参数可以进一步控制 Redux 状态。可以通过默认 CSF 导出的 argTypes 键中的 ARG_REDUX_PATH 键将参数链接到 Redux 存储。ARG_REDUX_PATH 的值是一个点分隔的字符串，表示参数在存储中对应的路径。整数段被视为数组索引。

import React from 'react'
import App from './App'
import { ARG_REDUX_PATH } from 'addon-redux'

export default {
  title: 'App',
  component: App,
  argTypes: {
    name1: {
      control: { type: 'text' },
      [ARG_REDUX_PATH]: 'todos.0.text'
    }
  }
};

const Template = (args) => <App />;

export const All = Template.bind({});
All.args = {
  name1: 'First Value',
  completed1: false
};

参数

addon-redux 当前支持一个 Storybook 参数，可用于在故事加载时更改 Redux 状态，即 PARAM_REDUX_MERGE_STATE。此参数接受一个 JSON 字符串或对象，该字符串或对象将被解析并扩展到当前存储的状态之上。

// example story using PARAM_REDUX_MERGE_STATE
import React from 'react'
import MyComponent from './MyComponent'
import { PARAM_REDUX_MERGE_STATE } from 'addon-redux'

export default {
  title: 'MyComponent',
  component: MyComponent,
  parameters: {
    [PARAM_REDUX_MERGE_STATE]: '{"foo": {"bar": "baz"}}'
  }
};

const Template = (args) => <MyComponent {...args} />;

export const All = Template.bind({});
All.args = {};