Передача нескольких реквизитов и действий в реакции / редуксе

Question

Я использую React и Redux в своем веб-приложении.
На странице входа у меня есть несколько полей (входов).
Страница входа состоит из нескольких компонентов для передачи реквизита.

Мне было интересно, как мне пропустить реквизит и обновить действия.
Например, предположим, у меня есть 5 входов на моей странице входа.

LoginPage (container) -> AuthenticationForm (Component) -> SignupForm (Component)

В LoginPage я сопоставляю состояние и отправляю реквизиты,
и я вижу здесь 2 варианта:

mapStateToProps = (state) => ({
  input1: state.input1,
  ...
  input5: state.input5
})

mapDispatchToProps = (dispatch) => ({
  changeInput1: (ev) => dispatch(updateInput1(ev.target.value))
  ...
  changeInput5: (ev) => dispatch(updateInput5(ev.target.value))
})

В этом решении мне нужно передать много реквизита по пути (действия по отправке и данные о состоянии).

Еще один способ сделать это так:

mapStateToProps = (state) => ({
  values: {input1: state.input1, ..., input5: state.input5}
})

mapDispatchToProps = (dispatch) => ({
  update: (name) => (ev) => dispatch(update(name, ev.target.value))
})

В этом решении я должен отслеживать и отправлять имя входа, которое я хочу обновить.

Как мне решить эту проблему?
Это кажется фундаментальным вопросом, так как многие формы должны справиться с этим,
но я еще не мог решить, что подойдет мне сейчас и в долгосрочной перспективе.

Каковы лучшие практики?

Answer 1

Лучшей практикой для решения этой проблемы является наличие локального состояния на Form Компоненте и управление им локально, потому что я считаю, что это не общее состояние. onSubmit вы можете отправить свое действие, передавая состояние к действию, которое требуется для выполнения вызова API или отправки его на ваш сервер.

Если вы будете пытаться обновлять свой магазин по мере того, как пользователь будет вводить текст, он продолжит отправлять действия, которые могут вызвать проблемы в будущем. Вы читаете больше здесь Обработка нескольких форм ввода в реаги

Answer 2

тд; др. это более «общая» практика кодирования. Но просто давайте поместим это в контекст реаги-редукса.

Скажем, если вы пойдете с заходом на посадку1, то у вас, вероятно, будет 5 создателей action как

function updateInput1({value}) {  return {type: 'UPDATE_INPUT1', payload: {value}} }
...
function updateInput5({value}) {  return {type: 'UPDATE_INPUT5', payload: {value}} }

также, если у вас есть actionTypes, тогда

const UPDATE_INPUT1 = 'UPDATE_INPUT1'
...
const UPDATE_INPUT5 = 'UPDATE_INPUT5'

редуктор, вероятно, будет выглядеть как

function handleInputUpdate(state = {}, {type, payload: {value}}) {
  switch (type) {
    case UPDATE_INPUT1: return {..., input1: value}
    ...
    case UPDATE_INPUT5: return {..., input5: value}
    default: return state
  }
}

В чем проблема, на самом деле, я не думаю, что вы распространяете слишком много реквизита в mapStateToProps / mapDispatchToProps, Не повторяйте себя !

Естественно, вам нужна более общая функция, чтобы избежать этого,

const UPDATE_INPUT = 'UPDATE_INPUT'

function updateInput({name, value}) { return {type: UPDATE_INPUT, payload: {name, value}} }

function handleInputUpdate(state = {inputs: null}, {type, payload: {name, value}}) {
  switch (type) {
    case UPDATE_INPUT: return {inputs: {...state.inputs, [name]: value}}
    default: return state
  }
}

Наконец, часть «селектор», основанная на том, как спроектировано состояние, получить реквизиты компонента из него, будет довольно тривиальной

function mapStateToProps(state) { return {inputs: state.inputs} }
function mapDispatchToProps(dispatch) { return {update(name, value) { dispatch(updateInput(name, value)) } }

Короче говоря, это не обязательно проблема редукса / реагирования, это скорее то, как вы разрабатываете состояние приложения для пользовательского интерфейса. Редукс просто предлагает вам утилиты и накладывает некоторые ограничения для включения «путешествия во времени» (переходы состояний делаются явными внутри обработчик мутаций, основанный на отдельном действии).

Answer 3

Я думаю, что лучшей практикой было бы обрабатывать всю эту логику в самом компоненте React. Вы можете использовать состояние компонента для хранения входных данных и использовать методы класса для их обработки. В React docs есть хорошее объяснение https://reactjs.org/docs/forms.html

Вы, вероятно, должны передать данные в Redux при отправке. Эфир хранит все состояние формы как объект или не хранит его вообще и просто отправляет действие с помощью вызова API.