-1

ReasonReact でフォームを書いています。状態としては中古reducerComponent・レコードです。私はこのようなものを持っているとしましょう:

type state = {
  field1: string,
  field2: int,
};

type action =
  | SetField1(string)
  | SetField2(int);

let component = ReasonReact.reducerComponent("SomeComponent");

let make = ( _children) => {
  ...component,
  initialState: () => {field1: "", field2: 0},
  reducer: (action, state) => switch(action) {
    | SetField1(value) => ReasonReact.Update({...state, field1: value}) 
    | SetField2(value) => ReasonReact.Update({...state, field2: value})
  },
  render: ({state, send}) => 
    <div>
      <input value={state.field1} onChange={e => send(SetField1(getValue(e)))} />
      <input value={state.field2 |> string_of_int} onChange={e => send(SetField2(e |> getValue |> int_of_string))} />
    </div>,
}

この例では 2 つのフィールドしかありませんが、たとえば 30 のフィールドがある場合、どのように処理しますか? これは、30 の異なるアクションを作成し、これをレデューサーで 30 回処理する必要があるということですか? 意味のないコードがたくさんあります。レコードをより動的に変更する方法はありますか、それとも状態 (オブジェクト、Js.t) に別の構造を使用する必要がありますか?

明確にするために、この種のフォームを 2 つのケースで使用します。

  1. 状態を Js.Json.t に変換し (bs-json を使用)、サーバーに送信する (bs-fetch を使用)
  2. reason-apollo (graphql) をミューテーションとして使用してサーバーに送信します。
4

1 に答える 1