如何在提交时将复杂的表单对象存储到 redux 状态？

Question

React/Redux 的新手，我正在努力让用户可以拥有尽可能多的 choices 和不同的 choice 和 customAttribute。

现在我有一个按钮，他们可以创建 UI 来动态创建一个新的文本字段来输入另一个 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
    }
}

如何将表单中的复杂对象存储到提交时的 redux 状态？现在我的 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 文档：Managing Normalized Data

我希望这会有所帮助！