connectiong wizard to redux

问题

      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"


      /> 
}

I am trying to get the value in text input from the redux api call, and expecting the value of api call in text field. Once I will be getting its value. I want to edit it value, and save its new value so that whenever i come back to the form, the new value should be retained

回答1:

Here is the answer for your new issue to add/delete fields

You can use FieldArray. The FieldArray component is how you render an array of fields (ref)

A sample code with add/delete:

// 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>
);

Then in your wizard page

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

Here is a demo: https://codesandbox.io/s/redux-form-wizard-example-m26bk?file=/WizardFormFirstPage.js:586-641

来源：https://stackoverflow.com/questions/61316985/connectiong-wizard-to-redux

标签

javascript

reactjs

redux