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

Question

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

例如，父(已连接)-> 子(未连接)-> 孙(已连接)

现在，如果我正在为 Parent 构建一个故事，我了解如何将硬编码数据作为 Prop 传递给直接子组件，以避免一起使用 Redux。但是，当连接的组件嵌套更深时，我无法弄清楚如何执行此操作。

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

任何想法都会有所帮助。

Answer 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 对所有组件进行 connect ing，这还删除了 redux 的所有样板代码。

React Redux now offers a set of hook APIs as an alternative to the existing connect() Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect().