Как мне написать рассказ для компонента, в котором компонент, связанный с редуктором, является внуком?

Question

Мы создаем библиотеку Storybook UI из нашей существующей базы кода. Код не был написан с учетом разработки компонентов. Во многих случаях компонент отображает потомков, которые подключены к хранилищу Redux.

Например, Родитель (подключен) -> Ребенок (не подключен) -> Внук (подключен)

Теперь, если я создаю историю для Родителя, я понимаю, как передавать жестко закодированные данныекак опора для непосредственного дочернего компонента, чтобы избежать всего Redux. Тем не менее, я не могу понять, как это сделать, когда подключенный компонент более глубоко вложен.

В идеале я не хочу вообще использовать Redux для историй, но даже если я инициализирую хранилище Redux и оборачиваю родительский компонент в провайдере, как описано здесь ,это даже работа по подключению компонента внука?

Любые идеи будут полезны.

Answer 1

При использовании storybook вы можете добавить Декоратор для всех историй.

Обычно вы оборачиваете свои истории у провайдера магазина государственного менеджера, чтобы не сломать историю, избегая «добавление 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 добавления всех ваших компонентов с помощью прижимных крюков, которые дополнительно удаляют весь код шаблонаof redux.

React Redux теперь предлагает набор подключаемых API в качестве альтернативы существующему компоненту высшего порядка connect (). Эти API-интерфейсы позволяют подписаться на хранилище Redux и отправлять действия без необходимости оборачивать ваши компоненты в connect ().