Как управлять формой React только с Redux?Без редукс-форм

Question

Прежде чем спросить об этом, я сделал поиск в Google и не нашел ни одного хорошего ресурса для управления формой только с Redux.Все примеры используют редукс-формы.Это только одна форма, и я не хочу устанавливать эту библиотеку для использования только в одной, минимальной, маленькой форме.

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

Это компонент, который у меня есть, и способЯ работал над этим:

import { compose } from 'redux';
import { connect } from 'react-redux';
import React from 'react';

import FormField from '../FormField/FormField';

import {
  startupThirdStepFormAction,
} from '../../pages/StartupApplication/actions/startupApplicationActions';

const StepThreeForm = ({
  startupThirdStepForm,
  startupThirdStepFormActionHandler,
 }) => (
    <>
      <Container>
        <Row>
          <Col>
            <Form>
              <FormField
                value={startupThirdStepForm.firstName}
                label="First Name"
                controlId="firstName"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    firstName: e.target.value,
                  })
                }
              />
              <FormField
                value={startupThirdStepForm.middleName}
                label="Middle Name"
                controlId="middleName"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    middleName: e.target.value,
                  })
                }
              />
            </Form>
          </Col>
        </Row>

      </Container>
    </>
);

export default compose(
  connect(
    store => ({
      startupThirdStepForm: store.startupApplicationReducer.startupThirdStepForm,
    }),
    dispatch => ({
      isStepDoneActionHandler: index => {
        dispatch(isStepDoneAction(index));
      },
      startupThirdStepFormActionHandler: form => {
        dispatch(startupThirdStepFormAction(form));
      },
    }),
  ),
)(StepThreeForm);

Прямо сейчас, как вы можете видеть, я пытаюсь отправить значение в магазин следующим образом:

                onChange={e =>
                  startupThirdStepFormActionHandler({
                    firstName: e.target.value,
                })

Это для firstName, но когда я делаю то же самое для поля middleName, он, очевидно, очищает поле firstName.

Вот редуктор:

const initialState = {
  startupThirdStepForm: {},
};

const handlers = {
  [ActionTypes.STARTUP_THIRD_STEP_FORM](state, action) {
    return {
      ...state,
      startupThirdStepForm: action.payload.startupThirdStepForm,
    };
  },
}

export default createReducer(initialState, handlers);

И действие:

export const startupThirdStepFormAction = startupThirdStepForm => ({
  type: ActionTypes.STARTUP_THIRD_STEP_FORM,
  payload: { startupThirdStepForm },
});

Итак, что я могу сделать, чтобы сохранить состояние полей формы без очистки остальных?

Answer 1

Попробуйте вместо этого сделать следующее для вашего редуктора:

const handlers = {
    [ActionTypes.STARTUP_THIRD_STEP_FORM]: (state, action) {
        return {
            ...state,
            startupThirdStepForm: {
                // to preserve old state
                ...state.startupThirdStepForm,
                // to update with new data
                ...action.payload.startupThirdStepForm,
            },
        };
    },
}

Answer 2

Очень быстрое предложение - создать копию состояния.Чтобы вы могли легко определить, какое поле для обновления вы можете добавить name и value в полезную нагрузку.

onChange={e =>
           startupThirdStepFormActionHandler({
                    name: "firstName"
                    value: e.target.value,
})


const handlers = {
  [ActionTypes.STARTUP_THIRD_STEP_FORM](state, action) {

    let newStartupThirdStepForm = Object.assign({}, state.startupThirdStepForm);
    newStartupThirdStepForm[action.payload.name] = action.payload.value;

    return {
      ...state,
      startupThirdStepForm: newStartupThirdStepForm,
    };
  },
}