如何为具有 redux 连接组件作为孙子的组件编写故事书故事？

Posted 2023-02-19

【中文标题】如何为具有 redux 连接组件作为孙子的组件编写故事书故事？

【英文标题】：How do I write a storybook story for a component that has redux-connected component as grandchild?

【发布时间】：2020-02-25 21:21:48

【问题描述】：

我们正在利用现有代码库构建 Storybook UI 库。编写代码时没有考虑到组件驱动的开发。在很多情况下，组件渲染连接到 Redux 存储的后代。

例如，父（连接）-> 子（未连接）-> 孙（连接）

现在，如果我正在为 Parent 构建故事，我了解如何将硬编码数据作为 prop 传递给直接子组件，以便一起避免 Redux。但是，当连接的组件嵌套更深时，我无法弄清楚如何做到这一点。

理想情况下，我根本不想在故事中使用 Redux，但即使我确实初始化了 Redux 存储并将父组件包装在 Provider 中，如 here 所述，这甚至可以连接孙子组件？

任何想法都会有所帮助。

【参考方案1】：

使用storybook 时，您可以为所有故事添加Decorator（有关最新API，请参阅链接）。

通常将您的故事与状态经理商店提供商一起包装，以免破坏故事，避免“为每个故事添加 store”。

// @ config.js
import  configure,  addDecorator  from '@storybook/react';

import React from 'react';
import  createStore  from 'redux';
import  Provider  from 'react-redux';
import rootReducer from 'reducers/root.reducer';

const store = createStore(rootReducer);

addDecorator(S => (
  <Provider store=store>
    <S />
  </Provider>
));


configure(require.context('../src', true, /\.stories\.js$/), module);

请注意，您可以避免使用 redux-hooks connecting 所有组件，这还会删除所有 redux 的样板代码。

React Redux 现在提供一组钩子 API 作为现有 connect() 高阶组件的替代方案。这些 API 允许您订阅 Redux 存储和调度操作，而无需将组件包装在 connect() 中。

【讨论】：

使用storiesOf会怎样？

我明白了，只是有点困惑。谢谢