Только последнее отправленное действие достигает редуктора

У меня есть компонент, в котором пользователь вводит имя, которое при изменении требует выполнения двух действий:

  1. Обновить значение поля имени компонента
  2. Асинхронная выборка с сервера, если имя уже существует в базе данных entityType

Я использую промежуточное программное обеспечение преобразователя для выполнения асинхронной работы, а затем отправляю оба действия внутри создателя действия преобразователя.

Но после передачи действий для отправки в создателе действий преобразователя только действие, отправленное последним, достигает редуктора (и, следовательно, может обновлять состояние). Почему это так? Где я делаю ошибку?

Спасибо за ваши ответы!

Соответствующие фрагменты кода:

namesection.js

function NameSection({
    entityType,
    nameValue,
    onNameChange,
    warnIfExists
}) {
    return (
        <div>
            <form>
                <Row>
                    <Col md={6} mdOffset={3}>
                        <NameField
                            defaultValue={nameValue}
                            warn={warnIfExists}
                            onChange={onNameChange}
                        />
                    </Col>
                </Row>
            </form>
        </div>
    );
}

function mapStateToProps(rootState) {
    const state = rootState.get('nameSection');
    return {
        nameValue: state.get('name'),
        warnIfExists: state.get('warnIfExists')
    };
}

function mapDispatchToProps(dispatch, {entityType}) {
    return {
        onNameChange: (event) =>
            dispatch(handleNameChange(event.target.value, entityType)),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(NameSection);

action.js

export function handleNameChange(
    newName,
    entityType
) {
    return (dispatch) => {

        dispatch({
                meta: {debounce: 'keystroke'},
                payload: newName,
                type: UPDATE_NAME_FIELD
            });

        return request.get('/search/exists')
            .query({
                collection: entityType,
                q: newName
            })
            .then(res => dispatch({
                 meta: {debounce: 'keystroke'},
                 payload: res.text === 'true',
                 type: UPDATE_WARN_IF_EXISTS
            }))
            .catch((error: {message: string}) => error);
    };
}

reducer.js

function reducer(
    state = Immutable.Map({
        name: '',
        warnIfExists: false
    }),
    action
) {
    const {payload, type} = action;
    console.log('reducer', payload, type);
    switch (type) {
        case UPDATE_NAME_FIELD:
            return state.set('name', payload);
        case UPDATE_WARN_IF_EXISTS:
            return state.set('warnIfExists', payload);
        // no default
    }
    return state;
}

В этом случае обновляется только warnIfExists, а поле имени не обновляется.


reactjs redux redux-thunk
person Shivam Tripathi    schedule 11.03.2018    source источник
comment
Вы получили значение event.target.value? Вы его успокоили?   -  person RIYAJ KHAN    schedule 11.03.2018
comment
@RIYAJKHAN Да, значения событий возвращаются нормально. Также вызывается создатель действий, и я также могу получить доступ к значениям там. Я отправляю одно действие, а затем перехожу к следующему, но отправляется только последнее (оба действия работают нормально при отдельном запуске или когда они отправляются последними).   -  person Shivam Tripathi    schedule 11.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Отказ от всего обработчика событий нажатия клавиш почему-то не кажется хорошей идеей. Разве это не блокирует появление персонажей сразу?

Вы пробовали разделить это на два действия?

  1. UPDATE_NAME_FIELD всегда следует отправлять и немедленно изменять состояние.
  2. CHECK_UNIQUE_NAME отправляется из того же обработчика событий, но отлаживается, а затем вы получаете текущее значение из getState перед отправкой запроса api. Тогда это приведет к CHECK_UNIQUE_NAME_SUCCESS, где редуктор обрабатывает результат, но также проверяет, изменилось ли имя за это время (чтобы ответы api для старых значений не повреждали состояние).
person timotgl    schedule 11.03.2018