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'),
    })
  ]
};

Args

使用 Storybook args 提供對 Redux 狀態的進一步控制。可以使用預設 CSF 匯出的 argTypes 鍵中的 ARG_REDUX_PATH 鍵，將 Args 連結到 Redux 儲存體。ARG_REDUX_PATH 的值是一個以點分隔的字串，代表 args 在儲存體中對應的路徑。整數區段會被視為陣列索引。

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 = {};