Javascript 如何仅使用Redux管理React表单？没有redux表单

在问这个问题之前，我做了一个谷歌搜索，我没有找到任何好的资源来管理一个只有Redux的表单。所有示例都使用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);

这是针对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 },
});

---

那么，如何在不清理其他字段的情况下保持表单字段的状态呢？

请尝试为您的reducer执行以下操作：

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,
            },
        };
    },
}

---

一个非常快速的建议是创建状态的副本。为了方便您识别要更新的字段，您可以在有效负载中添加名称和值

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,
    };
  },
}

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,
    };
  },
}