Redux-форма handleSubmit: как получить доступ к состоянию магазина?

В редуксеhandleSubmit Для вызова функции Ajax в Ajax необходимы некоторые свойства из состояния Redux (например, идентификатор пользователя).

Это было бы достаточно легко, если бы я хотел определитьhandleSubmit в компоненте формы: просто позвонитеmapStateToProps передать все, что мне нужно, и прочитать это изthis.props в моемhandleSubmit.

Однако, как хороший разработчик React-Redux, я пишуотдельный вид компонентов и контейнеров, так что мои компоненты представления могут быть простыми с небольшим поведением или без него. Поэтому я хочуопределить handleSubmit в моем контейнере.

Опять-таки, просто - для этого создана избыточная форма. ОпределитьonSubmit вmapDispatchToProps, и форма будет вызывать его автоматически.

За исключением, подождите, вmapDispatchToProps нет никакого способа получить доступ к избыточному состоянию.

Хорошо, нет проблем, я просто передам реквизит, который мне нуженhandleSubmit наряду со значениями формы.

Хм, подождите, невозможно передать какие-либо данные вhandleSubmit используя этот механизм! Вы получаете один параметр,valuesи нет никакого способа добавить другой параметр.

Это оставляет следующие непривлекательные альтернативы (из которых я могу убедиться, что 1 и 2 работают):

1 Определите обработчик отправки в компоненте формы, и оттуда вызвать мою собственную функцию обработчика отправки, переданную из mapDispatchToProps. Это нормально, но требует, чтобы мой компонент знал некоторые реквизиты из избыточного состояния, которые не требуются для отображения формы. (Эта проблема не уникальна для приставной формы.)

dumbSubmit(values)
{
  const { mySubmitHandler, user} = this.props;
  mySubmitHandler(values, user);
}

<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>

Или, более кратко, все это можно объединить в функцию стрелки:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

Затем, чтобы сделать этот обработчик полностью независимым, он может просто передать весь this.props обратно в пользовательский обработчик:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}

2 Определить onSubmit в mergeProps вместо mapDispatchToProps, поэтому он имеет доступ к stateProps.Дан Абрамов рекомендует не использовать mergeProps (по соображениям производительности)так что это кажется неоптимальным.

  function mergeProps(stateProps, dispatchProps, ownProps) {
  const { user } = stateProps.authReducer;
  const { dispatch } = dispatchProps;
  return {
    ...ownProps,
    ...dispatchProps,
    ...stateProps,
     onSubmit: (values) => {
       const { name, description } = values;
       const thing = new Thing(name, description, []);
       dispatch(createNewThing(thing, user.id));
     }
  }

3 Скопируйте свойства состояния в поля избыточной формы которые не отображаются ни на какие элементы управления вводом в компоненте формы. Это обеспечит их доступность вvalues параметр передан обратноhandleSubmit, Это похоже на взлом.

Должен быть лучший способ!

Есть ли способ лучше?

Ответы на вопрос(3)

Ваш ответ на вопрос