Как передать начальное состояние в качестве реквизита для моего компонента высшего порядка?

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 библиотека? Любой совет или помощь будут высоко оценены.:)

Answer 1

С некоторой помощью я смог решить мою проблему.

Я должен передать ссылку на функцию, которая устанавливает initialState в качестве последнего аргумента withState()таким образом, когда initialState будет вызван, у меня будет доступ к props Я перехожу к моему SliderDrag составная часть

Вот как я рефакторинг это

const initialState = ({min, max, step, width, value}) => {
  debugger;
  return defaults({min, max, step, width, value}, defaultState());
};

export const SliderDrag = withState('state', 'onChange', initialState)(
  ({state, onChange, action}) => (
      <Slider
      {...state}
      ...
      />
  )
);

defaults здесь просто переопределяет значения, которые я передаю, и дает мне новый объект, как мой state,

Это делает мой component настраивается, потому что любой другой component можете использовать его и передать props как initial state