React-reduxのReducerで配列を返すことは可能ですか?return先でundefinedになってしまいます。

Question

実現したいこと

以下の部分で、return先でundefinedとなってしまいます。

const TODOS = {
  todos: ["デバッグ用", "その2"]
};

function todo(state = TODOS, action) {
  switch (action.type) {
    case ADD_TODO:
      console.log([...state.todos, action.value]); // [todos + 入力したvalue]
      return [...state.todos, action.value];
    default:
      return state;
  }
}

しかしコンポーネント側でundefinedとなってしまい、map()でエラーとなります。

```TodoListコンポーネント
const TodoList = ({ todos }) => {
  console.log(todos); // ADDするとundefinedになる
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          <p>{todo}</p>
        </li>
      ))}
    </ul>
  );
};

const mapStateToProps = (state) => {
  console.log(state.todo.todos); // ここもundefinedんです
  return {
    todos: state.todo.todos,
  };
};

Comments

[jun68ykt]

map()でエラーとなっているとのコードが表示されていないので記載してほしいです。 (``` で終わってしまっています）

[退会済みユーザー]

すみません、途中で送信していました。ただ私もどこが原因なのか分からず、どこまでコードを挙げたらいいのか分からない状態です。

Answer 1

こんにちは
ひとつ押さえておくべきことは、リデューサーを書くとき、以下

const TODOS = {
  todos: ["デバッグ用", "その2"]
};

のようにリデューサーの引数 state の初期値を書きますが、これはstateの初期値がこのような内容のものである（todosに["デバッグ用", "その2"]という確認用の文字列が入っている。）という情報以外にも、もう一点重要なことを伝えています。それは何かというと、リデューサー本体で return する値が

{
  todos: [ "文字列1", "文字列2", "文字列3", ... ]
}

という形（TypeScript的にいえば型。以後、この回答でも型といいます。）のオブジェクトであるということです。その観点で確認すると

case ADD_TODO:
      console.log([...state.todos, action.value]); // [todos + 入力したvalue]
      return [...state.todos, action.value];

の部分が正しくないことが分かります。上記では文字列の配列をreturnしており、初期値TODOSと同じ型のオブジェクトを返していません。ですので、以下のように修正すると、意図通り動く（もしくは、現状で問題になっているエラーは解消される）と思います。

return { ...state, todos: [...state.todos, action.value] };

追記1

const TODOS = {
  todos: ["デバッグ用", "その2"]
};

の変数名は、TODOS でもよいとは思いますが、INITIAL_STATE だったり、 initialState あるいは initState といった、初期stateであることが分かる変数名にしたほうがよいかもしれません。それで例えば、 initialState と書くと決めたら、別のリデューサーでも initialState と書くことにすれば、コードが統一されて、全リデューサーの初期stateのコードを拾い出したいとき、 initialStateで検索すればよいことになります。

追記2

以下、参考までの補足です。

ReactとReduxによるアプリを書くのに、使う言語を　JavaScript から TypeScriptに移行して、きちんと型を意識したコードを維持すると、

return [...state.todos, action.value];

というコードを（うっかり）書いたとしても、リデューサーが返すべき値の型に合っていない旨のエラーとして警告されます。使っているエディタによっては、上記のようなコードを書くと、即、コードに赤の下線だったりが表示され、そこにマウスを乗せると、何が原因で型エラーになっているのかのエラーメッセージがホバーで表示されます。

ただし、nakamura0907さんの今の段階では、TypeScriptの習得はまだ先でよく、それよりもJavaScript でたくさん書いて、今回のようなエラーにたくさん遭遇するのがよいと思います。

追記3

現状のstateの型は

const TODOS = {
  todos: ["デバッグ用", "その2"]
};

上記のように、文字列の配列todos のみを持つオブジェクトなので、上記に回答した

return { ...state, todos: [...state.todos, action.value] };

の ...state, は不要で

return { todos: [...state.todos, action.value] };

でも大丈夫ですが、今後、todos以外にもプロパティが増えることが見えているのでしたら、

return { ...state, todos: [...state.todos, action.value] };

と書いておけば、プロパティが増えても todos だけが更新されて他のプロパティは同じ値で引き継がれたstateを返すコードになっています。

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ReactどころかJavaScriptの勉強を始めて3ヶ月も経たないので、もっと勉強する必要がありそうですね。
ありがとうございます。

[jun68ykt]

どういたしまして。

> ReactどころかJavaScriptの勉強を始めて3ヶ月も経たない

そうでしたか。
ReactもそうですがJavaScriptの書き方自体も、新しい構文が追加されるなど進化していますし、styled-components やMaterial-UI　のような便利なUI関連のモジュールも続々と出てきて、さらにはTypeScriptの流行が進化に拍車をかけていますので、

> もっと勉強する必要

は確かにありますが、焦る必要は全然ないです。

フロントエンドをやり始めると、（私も今もってそうですが、)どうしても新しいことに目移りしてしまいますが、JavaScriptに入門してからの約1年間は、意識して「最新を追わない。むしろ最新から三年遅れぐらいでいい」ぐらいに開き直って、その分、基礎をみっちりやり込んだほうが、その後が楽になるように思います。

学習が捗ることをお祈りしております。草々