web-dev-qa-db-ja.com

Redux Connected Componentを孫としてresux接続したコンポーネントのストーリーブックストーリーを書くにはどうすればよいですか。

既存のコードベースからストーリーブックUIライブラリを構築しています。コードはコンポーネント駆動型開発を念頭に置いて書かれていませんでした。コンポーネントがREDUXストアに接続されている子孫をレンダリングする多くのインスタンスがあります。

例えば、親（接続） - >子（未接続） - >孫（Connected）

今、親のためにストーリーを構築している場合は、Reduxをまとめて避けるために、即時の子コンポーネントへのハードコード化データを渡す方法を理解しています。ただし、接続コンポーネントが深くネストされているときにこれを行う方法を理解することはできません。

理想的には、StoriesにReduxを使用しなければならないが、説明されているようにReduxストアを初期化してプロバイダ内の親コンポーネントを包むたとえ ここに は接続しても接続しますか孫コンポーネント？

アイデアは役に立ちます。

reactjsreduxreact-reduxstorybook
7
Avi C

storybookを使用するときは、すべてのストーリーに対して デコレータ を追加できます（最新のAPIのリンクを参照）。

ストーリーを回避しないようにState Managerストアプロバイダと一緒にあなたのストーリーをラップするのは一般的です「各ストーリーの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-Hookを使用してすべてのコンポーネントをconnectを避けることができます。これに加えてREDUXのすべての定型コードを削除します。

React Reduxは、既存のConnect（）上位コンポーネントの代わりとしてのフックAPIのセットを提供しています。これらのAPIを使用すると、コンポーネントをconnect（）に囲む必要なしに、REDUXストアとディスパッチアクションを購読できます。

12
Dennis Vash