useReducer stateが配列がネストされてみたな形になってします

Question

状態管理にuseReducerを使用しています。

const initialState: Data[] = new Array();


const reducer = (state, action: DataAction) => {
  switch (action.type) {
    case DataType.GET:
     console.log(Object.assign(state, action.res)); //コンソール [{...},{...},{...}...]いい感じ
     return Object.assign(state, action.res);  //コンソール [] クリックすると{...},{...}..は入っているが配列[0]でやっても[]が帰ってくる
    default:
      state;
  }
};

コンポーネントに渡すときにreturn [state]で渡してます(分割代入)

なぜ、Object.assignで同じように書いているのに結果が変わるのでしょうか？

Comments

[maisumakun]

action.resの中身はどのようなものでしょうか？

[2_34_koki]

action.res = [ {id:1, name: "a"}, {id:2, name: "b"},.....}]
みたに配列の中に連想配列が複数入ってる感じです

[maisumakun]

既存のstateとどのようにマージする想定ですか？

[2_34_koki]

最初にstateは[]でよくて,DBからデータを撮ってきてstateを更新する感じです。
そのあとはstateの更新はありません。

Answer 1

なぜ、Object.assignで同じように書いているのに結果が変わるのでしょうか？

変わる変わらない以前に、stateへのObject.assignは破壊的変更に当たるので、基本的にやってはいけません。

stateが配列なら、const ret = [...state];やconst ret = state.slice()のようにコピーしてからコピーを加工して返すようにしましょう。

Comments

[maisumakun]

> 最初にstateは[]でよくて,DBからデータを撮ってきてstateを更新する感じです。

それなら、取ってきたものをそのまま返せば用件は片付くので、return action.res;だけで大丈夫です。