添加Redux Store后Storybook无法运行的问题求助

错误原因 #

1. 组件不从props接收stringResults，而是通过useSelector从Redux store获取，因此你在Default.args里配置的数组完全无效。
2. 模拟的store结构与实际应用中的Redux store不匹配：你的selectStringResults大概率是从state.reverseString.stringResults取值（对应slice在根reducer中的key），但当前模拟store直接返回{stringResults: []}，导致selectStringResults返回undefined，调用map时触发报错。
3. 组件未做空值保护，当stringResults为undefined时直接调用map方法。

具体修复步骤 #

1. 修正模拟store的结构 #

假设你的根reducer是通过combineReducers将reverseStringSlice的reducer挂载在reverseString这个key下，修改模拟store的getState返回对应结构：

// ReverseStringResults.stories.jsx
// 先定义测试数据
const mockResults = [
  {
    originalString: "Hello World",
    reversedString: "dlroW olleH",
    isPalindrome: false,
  },
  {
    originalString: "kayak",
    reversedString: "kayak",
    isPalindrome: true,
  },
  {
    originalString: "my gym",
    reversedString: "myg ym",
    isPalindrome: true,
  },
  {
    originalString: "Love React",
    reversedString: "tcaeR evoL",
    isPalindrome: false,
  },
  {
    originalString: "mom",
    reversedString: "mom",
    isPalindrome: true,
  },
];

// 修正后的模拟store
const store = {
  getState: () => {
    return {
      reverseString: { // 对应slice在根reducer中的key
        stringResults: mockResults
      }
    };
  },
  subscribe: () => 0,
};

2. 给组件添加空值保护 #

即使store结构正确，也可能存在初始状态未加载的情况，在组件中添加空值处理：

// ReverseStringResults.jsx
export const ReverseStringResults = () => {
  const stringResults = useSelector(selectStringResults) || []; // 加默认空数组
  console.log(stringResults)

  return (
    <div>
      <h1>Reverse String Results</h1>
      <ol className="list-group list-group-numbered">
        {stringResults.map((stringResult) => {
          return (
            <StringResult
              key={stringResult.originalString}
              stringResult={stringResult}
            />
          );
        })}
      </ol>
    </div>
  );
};

3. （可选）支持通过props灵活控制数据 #

如果希望在Storybook中通过args快速切换测试数据，可以修改组件优先使用props， fallback到store数据：

// ReverseStringResults.jsx
export const ReverseStringResults = ({ stringResults: propsResults }) => {
  const storeResults = useSelector(selectStringResults);
  // 优先用props数据，没有则用store数据，最后兜底空数组
  const stringResults = propsResults ?? storeResults ?? [];

  // ...后续代码不变
};

此时你之前在Default.args里的配置就会生效，同时兼容从Redux store获取数据的场景。

内容的提问来源于stack exchange，提问作者Jo Murray