React / Redux передает входные значения в reducer.js

Question

В настоящее время мое приложение работает только с React и его состоянием, я пытаюсь реализовать его с помощью Redux.

У меня есть родительский компонент, который отображает дочерний компонент, этот дочерний компонент - то, где я храню свойполя ввода.Ниже приведено то, что я передаю (все работает с состоянием, и только submitresults работает с редуктором).

            <ManualInputs
                //addEntry={this.addEntry}
                submitResults={this.props.submitResults}

                xPartyinputValue={this.props.xPartyinputValue}
                zPartyinputValue={this.props.zPartyinputValue}
                yActioninputValue={this.props.yAction}

                handleChangeAmount = {this.handleChangeAmount}
                handleChangeXParty={this.handleChangeXParty}
                handleChangeZParty={this.handleChangeZParty}
                handleChangeyAction={this.handleChangeyAction}
            />

submitResults={this.props.submitResults} работает, отправляя объект в редуктори я расскажу вам, как это работает:

const mapDispatchToProps = dispatch => {
    return {
        submitResults: () => dispatch({type: 'SUBMIT', x: {
            id: Math.random(),
            xParty: 'Tom',
            yAction: 'Funds',
            zParty: 'Elizbath',
            amount: 50,
            payload: 'xPartyinputValue'
        }
        })
    };
};

Функция выше отправляет данные в файл reducer.js и корректно обновляет там исходное состояние, но у меня такой вопрос,

Правосейчас в submitResults я жестко кодирую значения, но я хочу получить значения из пользовательского ввода, который находится в <ManualInputs>.Как мне это сделать?

----------------------- ОБНОВЛЕНО И Доработано --------------------------

Единственными частями, которые были изменены, являются submitResults={this.props.submitResults} на:

submitResults={() => this.props.submitResults(this.state.xPartyinputValue, this.state.zPartyinputValue, this.state.yActioninputvalue, this.state.amountinputvalue)}

Это не передача нужных нам значений.

И часть mapDispatchToProps совсем другая, просто передается в аргументах и ​​вызывает их.submitResults: (xParty, zParty, yAction, amount) => dispatch({type: 'SUBMIT', x: { id: Math.random(), xParty: xParty, yAction: zParty, zParty: yAction, amount: amount } })

Answer 1

вы можете передать аргументы методу submitResults ...

рассмотрите следующий код:

const mapDispatchToProps = dispatch => {
return {
    submitResults: (args) => dispatch({type: 'SUBMIT', x: {
        id: Math.random(),
        xParty: args.xparty,
        yAction: args.yaction,
        zParty: args.zparty,
        amount: args.amount,
        payload: args.xpartyinputvalue
    }
    })
  };
};

Answer 2

Есть несколько способов.

1. Вы можете использовать redux-form для отслеживания ваших входов и обновления состояния.
2. Вы можете настроить свои входы для запуска действий и обновления соответствующих полей в вашем состоянии избыточности. Затем, когда вы хотите отправить, вы можете просто запустить новое действие, которое получает ваше текущее состояние, с помощью getState (без возврата к компоненту) отправляет данные и при успешном завершении очищает поля ввода.
3. Вы можете установить локальное состояние внутри вашего компонента класса, где находятся ваши поля ввода. Затем в вашем mapDispatchToProps вы можете отправить данные уже созданному действию.

Вы можете взглянуть на это руководство, чтобы немного попрактиковаться: https://medium.com/@pnpsegonne/tutorial-creating-a-form-with-react-redux-c1b3025cf26b

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

Здесь вы можете прочитать немного больше о redux-form, и если вы пойдете по этому пути: https://medium.com/dailyjs/why-build-your-forms-with-redux-form-bcacbedc9e8