Мастер подключения к редуксу

Question

      action.ts:
      export const fetchField = (dispatch) => {
          console.log("!!!")
          const Form = new Service();
          Form
            .getProduct()
            .then((spec: Spec) => {
              dispatch({
                type: ACTIONS.SPEC.SHOW,
                spec : specification,
              });
            })
            .catch((err) => {});
        };

    appReducer:
    export interface FormsState {
     products: Array<Specification>
    }
    let initialState: FormsState = {
    products: []
    };

    export let appReducer = (
      state: FormsState = initialState,
      action
    ) => {
      switch (action.type) {
        case ACTIONS.SPEC.SHOW:
          return Object.assign({}, state, {
              products: [...action.products],
            });

        default:
          return state;
      }
    };

App.tsx:

const mapStateToProps = (state: FormsState) => {
  return state;
};


const mapDispatchToProps = dispatch => {
  return {
    fetchField: () => fetchField(dispatch),
  };
}
interface Props{
  fetchField: Function;
  details: Array<Specification>
}

 componentDidMount() {
    this.props.fetchSwaggerField();
}
render(){
<TextInput
            invalidText="A valid value is required"
            labelText="API title"
            type = "text"
            value={this.props.fetchField.length}
            name="title"


      /> 
}

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

Answer 1

Вот ответ на ваш новый вопрос по добавлению / удалению полей

Вы можете использовать FieldArray. Компонент FieldArray - это способ отображения массива полей ( ref )

Пример кода с добавлением / удалением:

// renderSubFields.js
const renderSubFields = (member, index, fields) => (
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => fields.remove(index)}
    />
    <h4>Member #{index + 1}</h4>
    <Field
      name={`${member}.firstName`}
      type="text"
      component={renderField}
      label="First Name"
    />
    <Field
      name={`${member}.lastName`}
      type="text"
      component={renderField}
      label="Last Name"
    />
  </li>
);

const renderMembers = ({ fields }) => (
  <ul>
    <button type="button" onClick={() => fields.push({})}>
      Add Member
    </button>
    {fields.map(renderSubFields)}
  </ul>
);

Затем на странице мастера

<FieldArray name="members" component={renderMembers} />

Вот демонстрационная версия: https://codesandbox.io/s/redux-form-wizard-example-m26bk?file= / WizardFormFirstPage. js: 586-641