Как сохранить объект сложной формы в избыточном состоянии при отправке?

Question

новичок в React / Redux, я пытаюсь сделать так, чтобы у пользователя было столько choices с разными choice и customAttribute.

Пока у меня есть кнопка, с помощью которой они могут создать пользовательский интерфейс для динамического создания нового текстового поля для ввода других choice и customAttribute, но я полностью озадачен о том, как хранить такую ​​вещь в redux.

Я видел другие вопросы и ответы о том, как хранить имя пользователя и / или пароль, но не видел примеров того, как сохранить объект с моим полным состоянием в нем. .

Мой компонент

class CreateRIG extends Component<any, any> {
  constructor(props) {
    super(props);

    this.state = {
      rigName: '',
      desc: '',
      choices: [{
        choice: '',
        customAttribute: ''
      }]
    }
  }

  createUI() {
    return this.state.choices.map((el, i) => (
      <div key={i}>
        <FormControl>
          <Select
            id="choice"
            name="choice"
            onChange={this.handleChange.bind(this, i)}
            value={el.choice || ''}
          >
            <MenuItem value=''>
              <em>None</em>
            </MenuItem>
            <MenuItem value='ID'>ID</MenuItem>
            <MenuItem value='PSA'>PSA</MenuItem>
            <MenuItem value='ExternalID'>ExternalID</MenuItem>
          </Select>
        </FormControl>
        <div>
          <TextField name="customAttribute" label="Attribute"
            onChange={this.handleChange.bind(this, i)} value={el.customAttribute || ''} />
    ))
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
          <form onSubmit={this.handleSubmit}>
                    <div>
                      <TextField name="rigName"
                        value={this.state.rigName}
                        onChange={event => this.setState({ rigName: event.target.value })}/>
                    </div>
                    <div className={styles.spacing}>
                      <TextField name="description" 
                        onChange={event => this.setState({ desc: event.target.value })}/>
                    </div>
                  {this.createUI()}
                  <Button type="submit" 
                  onClick={this.props.onSubmitForm}>NEXT</Button>
          </form>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onSubmitForm: (rigName, desc, choice, customAttribute) => dispatch({ type: 'FORM_DATA'})
  }
}

const connectedCreateRIGPage = connect(mapStateToProps, mapDispatchToProps)(CreateRIG);
export { connectedCreateRIGPage as CreateRIG };

export default CreateRIG;

Action.tsx

export const createRIGActions = {
    searchInput
};

function searchInput(rigName, desc, choice, customAttribute) {
    return {
        type: createRIGConstants.STORE_FORM,
        rigName,
        desc,
        choice,
        customAttribute
    }
}

Reducer.tsx

const initialState = { 
    results: [] 
};

export function createRIGReducer(state = initialState, action) {
    switch (action.type) {
        case createRIGConstants.STORE_FORM:
            return {
                ...state,
                results: state.results
            }
            // Need to somehow get the data from the form

        default:
            return state
    }
}

Как сохранить сложный объект из форма, в избыточное состояние при отправке? Прямо сейчас мой onSubmit - консоль, записывающая правильный объект, который я хочу, так что это здорово

Answer 1

Я полагаю, что просто важно, что вы передаете в dispatch. Вы также можете добавить туда payload.

Попробуйте сделать следующее:

const mapDispatchToProps = dispatch => {
  return {
    onSubmitForm: (rigName, desc, choice, customAttribute) => dispatch({ type: 'FORM_DATA', payload: {rigName, desc, choice, customAttribute}})
  }
}

Тогда в вашем редукторе вы сможете получить доступ к payload, например:

export default (state=initialState, action) => {
    switch(action.type) {
        const { payload } = action;
        case 'FORM_DATA':
            return {
                ...state,
                // here you can use data from payload to update the state
            };

Более подробную информацию можно найти в документации Redux: Управление нормализованными данными

Надеюсь, это поможет!