質問: 0; i < state.testList[0].length; i++) { fieldList.push(state.testList[0][i][0]) // initialStateの内のtestListからリストを作成 } } return { ...state, fieldOptionList3: state.fieldOptionList3.concat(fieldList) //fieldOptionList3に入れる } ``` 恐らく問題の原因だと思っているのは、これのreducerの実行のタイミングです。 #### 1つめのアプローチ 上述した4つのコンポーネント(redux-formをもちいたセレクトボックスのコンポーネント)を一つのクラスに入れて実装していました。 そして上述のreducerの実行のタイミングを、「このクラスのcomponentDidUpdate()の中」で実行しました。 すると、2個目のセレクトボックスの値を変更した直後に無限ループに入りました。 testListに同じ値(しかし正しい)が永遠にpushされ続けます。 #### 2つ目のアプローチ 1つめと同じことをrender()の前、componentWillUpdate()で実行してみました。 コレも同じで、2個目のセレクトボックスの値を変更した直後に無限ループに入りました。 #### 3つ目のアプローチ この4つのセレクトボックスが一つのクラスに入っているので、このクラスのライフサイクルを指定してもタイミングがおかしくなるだけかなと思い、 各セレクトボックスを個別のクラスに分け、その個別のクラスの中でcomponentWillUpdate()を実装し、そのクラスを一つのクラスにまとめてみました。 これもまた、同じように2個目のセレクトボックスの値を変更した直後に無限ループに入りました。 ### 合っているのか間違っているのかわからない点 そもそもこういったものを作りたいと思った時にReducer内で場合分けをして、リストを作成しreturnするというのは正しいのでしょうか。Reducer内ではなく、Action内で行うものだったりするのでしょうか。 ### その他 その他、「そもそもそういうのを実現したいのなら、全く別のシンプルな方法があるよ」などの意見があればそれも教えて頂けるとうれしいです。 よろしくお願いします。
回答: 雑なコメントになってしまい申し訳ないですが、プルダウンメニューUIの状態を担当するreducerを作って、そこで各プルダウンメニューで選択されているものを管理してあげれば良いのではないでしょうか。 そして、各プルダウンメニューを表示するUI Component(またはそのComponentをラップするContainer)の方で、redux storeにconnectして、mapStateToPropsの中でごにょごにょすれば良いのではないかと思います。 ``` function mapStateToProps(state, ownProps) { return { optionsForXxx: getOptions(state.selectMenuUi) } } ``` 上のoptionsForXxxというのが1番目、2番めのプルダウンメニューの選択肢によって表示するオプションリストが変動するプルダウンメニューのオプションリストだとして、UIの状態を管理するreducerだとして、state.selectMenuUiというのが、各プルダウンメニューの選択されている値を管理するreducer。そして、getOptionsという関数がいやゆるselectorと呼ばれるもので、現在のstateに応じた値を計算なり判断なりして決める役割を持つもの。(reselectorライブラリというのがあるので、それを使うと良いかもしれません。) reducerの方ではあくまで現在、選択されている各プルダウンメニューの識別値のみを管理させて、実際に表示するオプションのリストはselector、またはコンポーネントの方で依存しているプルダウンメニュ側で選択されているオプションに応じたものを出してあげれば良いのではないかと思います。