javascript - 高次コンポーネントの小道具として初期状態を渡す方法は?

Question

Slider独自の状態を処理しないコンポーネントがあります。代わりに、状態SliderDragを管理し、小道具をSlider

それを達成するためにライブラリから使用withStateしています。recompose

ここに私のSlider状態の初期状態があります

export const getInitialState = () => ({
  min: 0,
  max: 100,
  value: 50,
  step: 1,
  width: 100,
  dragging: false
});

そして、これが私の高次コンポーネントですwithState()

export const SliderDrag = withState('state', 'onChange', getInitialState())(
  ({state, onChange, action}) => (
  <Slider
  {...state}
  onDragStart={({x}) => {
    onChange(dragStart(x, state));
  }}
  onDrag={({x}) => {
    onChange(drag(x, state));
    action('value')(state.value);
  }}
  onDragEnd={() => {
    onChange(dragEnd(state));
  }}
 />
)
);

そして、これが私が使いたい方法ですSliderDrag。アプリのさまざまなコンテキストでstateこのコンポーネントを使用できるように、小道具を渡してイニシャルを設定したいSlider

export const interactive = (action) => (
  <Storypage theme={designerTheme}>
    <SliderDrag width={218} step={1} min={0} max={100} action={action}/>
  </Storypage>
);

ライブラリcomposeから使用する必要がありますか? recomposeアドバイスやヘルプをいただければ幸いです。:)