Question

我们正在根据现有代码库构建一个Storybook UI库。编写该代码时并未考虑组件驱动的开发。在许多情况下，组件都会呈现连接到Redux存储的后代。

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

现在，如果我要为Parent创建一个故事，那么我将了解如何将硬编码数据作为道具传递给直接子组件，从而避免一起使用Redux。但是，当连接的组件嵌套得更深时，我不知道如何执行此操作。

理想情况下，我根本不需要在故事中使用Redux，但是即使我确实按照here的描述初始化Redux存储并将父组件包装在Provider中，这甚至也可以用来连接孙子组件？

任何想法都会有所帮助。

Answer 1

使用storybook时，您可以为所有故事添加Decorator。

通常将您的故事与状态管理器商店提供商包装在一起，以免破坏故事，而避免“为每个故事添加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);

请注意，您可以避免connect使用redux-hooks来添加所有组件，此外还会删除redux的所有样板代码。

React Redux现在提供了一组挂钩API，以替代现有的connect（）高阶组件。这些API允许您订阅Redux存储和调度操作，而不必将组件包装在connect（）中。

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

1 个答案: