在Twilio Flex中设置一个由Redux支持的表单以保留每个保留状态的良好做法是什么?

时间:2019-09-13 18:16:01

标签: twilio-flex

我正在Flex的CRM窗格中构建一个React表单,当代理填写表单并单击“提交”按钮时,它将POST数据发送到外部服务。使用来自Plugin Builder v3的create-flex-plugin中的示例代码,我成功地将redux中来自表单字段的数据持久化了。但是,作为Flex中的代理,如果我打开了多个保留,则在它们之间切换时,它们将使用相同的数据。如何设计表单,以便业务代表可以在表单中为不同的保留项输入数据并将它们分开保存?

我对Flex,React和Redux相对较新,并且不确定我需要做什么,尤其是在处理多个并发预留时,是否有任何Flex特定的东西。我曾考虑过在Redux中保留由ReservationId或taskId作为键的Map,但目前尚不清楚如何将taskId传递给reducer。我也不确定redux-form之类的其他工具是否可以与Flex的设计配合使用。

指出正确的方向或获取一些示例代码会很有帮助。

我当前的实现保留了一个名为“ subcategory”的子域,如下所示:

HrmFormState.js

const UPDATE_FORM = 'UPDATE_FORM';

const initialState = {
  subcategory: 'my category',
};

export class Actions {
  static updateForm = (e) => ({ type: UPDATE_FORM, text: e.target.value });
}

export function reduce(state = initialState, action) {
  switch (action.type) {
    case UPDATE_FORM: {
      return {
        ...state,
        subcategory: action.text,
      };
    }

    default:
      return state;
  }
}

HrmForm.Container.js


import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { Actions } from '../../states/HrmFormState';
import HrmForm from './HrmForm';

const mapStateToProps = (state) => ({
  subcategory: state['hrm-form'].hrmForm.subcategory,
});

const mapDispatchToProps = (dispatch) => ({
  updateForm: bindActionCreators(Actions.updateForm, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(HrmForm);

HrmForm.jsx(摘要)

  render() {
    if (!this.props.task) {
      return null;
    }

    return (
      <HrmFormComponentStyles>
        <form onSubmit={this.handleSubmit}>
          <label>
            Subcategory:
            <input type="text" value={this.props.subcategory} 
              onChange={this.props.updateForm} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </HrmFormComponentStyles>
    );
  }

0 个答案:

没有答案