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 つのケースで使用します。
- 状態を Js.Json.t に変換し (bs-json を使用)、サーバーに送信する (bs-fetch を使用)
- reason-apollo (graphql) をミューテーションとして使用してサーバーに送信します。