我们正在从现有代码库构建 Storybook UI 库。编写代码时并没有考虑到组件驱动开发。在很多情况下，组件呈现连接到 Redux 存储的后代。
例如，父（已连接）-> 子（未连接）-> 孙（已连接）
现在，如果我正在为 Parent 构建一个故事，我了解如何将硬编码数据作为props传递给直接子组件，以避免一起使用 Redux。但是，当连接的组件嵌套更深时，我无法弄清楚如何执行此操作。
理想情况下，我不希望有在所有的故事用终极版，但即使我不初始化终极版存储和描述的提供者包裹父组件在这里，就这甚至工作到连接孙子成分？
任何想法都会有所帮助。
使用时，storybook您可以为所有故事添加装饰器（请参阅最新 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);
请注意，您可以避免connect使用 redux-hooks 调用所有组件，这还删除了 redux 的所有样板代码。
React Redux 现在提供了一组钩子 API 作为现有 connect() 高阶组件的替代方案。这些 API 允许您订阅 Redux 存储和分派操作，而无需将组件包装在 connect() 中。