twilio-flex - 各予約の状態を保持する Twilio Flex で redux-backed フォームを設定するための良い方法は何ですか?

Question

POSTエージェントがフォームに入力して送信ボタンを押すと、外部サービスにデータを送信するFlex の CRM ペインで React フォームを作成しています。Plugin Builder v3のサンプル コードを使用してcreate-flex-plugin、フォーム フィールドのデータを redux で永続化することに成功しました。ただし、Flex のエージェントとして、複数の予約を開いている場合、それらを切り替えると、それらは同じデータを使用します。エージェントが異なる予約のフォームにデータを入力し、それらが別々に保持されるようにフォームを設計するにはどうすればよいですか?

私はFlex、React、Reduxに比較的慣れていないため、特に複数の同時予約を処理する場合に、何をする必要があるかについてFlex固有のものがあるかどうかわかりません。redux では、reservationId または taskId をキーとする Map を維持することを考えましたが、taskId をレデューサーに渡す方法が明確ではありません。また、redux-form のような他のツールが Flex の設計とうまく機能するかどうかもわかりません。

正しい方向を示したり、サンプル コードを取得したりすることは、大きな助けになります。

「サブカテゴリ」と呼ばれるフィールドを永続化する現在の実装は、次のようになります。

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