React Hooks を用いた Todo アプリにおいてステートの更新で正しくレンダリングされない

Question

前提

現在 React を勉強していて、簡単な Todo アプリを作っています。
flux 思想で設計しており、View で変更を検知して Action でデータを発行、それを Dispatch で処理して Store に反映させています。

発生している問題・エラーメッセージ

Action、Dispatch、Store までは上手く処理できたのですが、Store で変更された State を受け取った View がレンダリングしてくれません。
State は更新されるものの画面上のタスクが変化しないのです。

• Create ボタンを押すと、タスクが新規作成されて表示されるはず
• 入力エリアに 既存タスクの ID を入力して Delete ボタンを押すと対象のタスクが削除されるはず

ただ、Delete 用に設置している input に何らかを入力すると、それまで溜まっていた変更が一気に反映されます。
例) Create を3回クリック -> 反応なし -> input に入力 -> タスクが3つ作成される

該当のソースコード

TodoStore.ts (Store)

import { EventEmitter } from 'events';
import dispatcher from '../dispatcher';

class TodoStore extends EventEmitter {
  todos: { id: number; text: string; complete: boolean }[];

  constructor() {
    super();
    this.todos = [
      {
        id: 113464613,
        text: 'Go Shopping',
        complete: false,
      },
      {
        id: 235684679,
        text: 'Pay Water Bills',
        complete: false,
      },
    ];
  }

  createTodo(text: string) {
    const id = Date.now();

    this.todos.push({
      id,
      text,
      complete: false,
    });

    this.emit('change');
  }

  deleteTodo(deleteId: number) {
    const deleteIndex = this.todos.findIndex(({ id }) => id == deleteId);

    if (deleteIndex !== -1) {
      this.todos.splice(deleteIndex, 1);
      this.emit('change');
    }
  }

  receiveTodos(todos: { id: number; text: string; complete: boolean }[]) {
    this.todos = todos;
    this.emit('change');
  }

  getAll() {
    return this.todos;
  }

  handleActions(action: any) {
    switch (action.type) {
      case 'CREATE_TODO': {
        this.createTodo(action.text);
        break;
      }
      case 'DELETE_TODO': {
        this.deleteTodo(action.id);
        break;
      }
      case 'RECEIVE_TODOS': {
        this.receiveTodos(action.todos);
        break;
      }
    }
  }
}

const todoStore = new TodoStore();
dispatcher.register(todoStore.handleActions.bind(todoStore));

export default todoStore;

Todos.tsx (View)

import React, { ChangeEvent, FC, useEffect, useState } from 'react';
import * as TodoActions from '../actions/TodoActions';
import Todo from '../components/Todo';
import TodoStore from '../stores/TodoStore';

const Todos: FC = () => {
  const [todos, setTodos] = useState(TodoStore.getAll());
  const [deleteId, setDeleteId] = useState(Number);

  const TodoComponents = todos.map((todo) => {
    return <Todo key={todo.id} {...todo} />;
  });

  const marginStyle = {
    marginRight: '10px',
  };

  const getTodos = () => {
    setTodos(TodoStore.getAll());
    console.log(todos); // ボタンをクリックすると Todos.tsx の todos ステートが更新されていました。
  };

  const reloadTodos = () => {
    TodoActions.reloadTodos();
  };

  const createTodo = () => {
    TodoActions.createTodo('New Todo');
  };

  const deleteTodo = (id: number) => {
    TodoActions.deleteTodo(id);
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (!(event.target instanceof HTMLInputElement)) {
      return;
    }
    const intValue = Number(event.target.value);
    setDeleteId(intValue);
  };

  useEffect(() => {
    TodoStore.on('change', getTodos);
    return () => {
      TodoStore.removeListener('change', getTodos);
    };
  }, []);

  return (
    <div>
      <button className="btn btn-default" onClick={() => reloadTodos()} style={marginStyle}>
        Reload!
      </button>
      <button className="btn btn-default" onClick={() => createTodo()} style={marginStyle}>
        Create!
      </button>
      <button className="btn btn-default" onClick={() => deleteTodo(deleteId)} style={marginStyle}>
        Delete!
      </button>
      <input type="number" value={deleteId} onChange={(e) => handleChange(e)} style={marginStyle} />
      <h3>Todos</h3>
      <ul>{TodoComponents}</ul>
    </div>
  );
};

export default Todos;

Todo.tsx (View)

import React, { FC } from 'react';

type Props = {
  id: number;
  text: string;
  complete: boolean;
};

const Todo: FC<Props> = (props: Props) => {
  const { complete, text, id } = props;
  const icon = complete ? '\u2714' : '\u2716';
  const marginStyle = {
    marginRight: '20px',
  };

  return (
    <li>
      <span style={marginStyle}>{id}</span>
      <span style={marginStyle}>{text}</span>
      <span>{icon}</span>
    </li>
  );
};

export default Todo;

試したこと

Todos.tsx の todos ステートを TodoComponents で処理して Todo.tsx に渡しているのですが、todos ステートの更新を TodoComponents が追えていないような気がしています。

useRef 等も使って解決を試みているのですが、勉強不足もあってなかなか進まないため質問させていただきました。

補足情報（FW/ツールのバージョンなど）

{
  "dependencies": {
    "@types/flux": "^3.1.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "^5.1.9",
    "@types/react-router-dom": "^5.1.7",
    "flux": "^4.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "ts-jest": "^26.4.4",
    "typescript": "^4.1.3"
  }
}

Answer 1

Reactは、Object.isによるアルゴリズムを使用して、stateの更新を検知します。Object.isでは、中身が異なっていても、オブジェクト自体が同じなら同値とみなされます。

https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is

stateを更新したいならば、以前のものとは異なるオブジェクトを新しいstateとして設定してあげなければなりません。

次のように、setTodosに与える値を、新しい配列にすることで、stateは更新されるかと思います。

- setTodos(TodoStore.getAll());

+ const newTodos = TodoStore.getAll()
+ setTodos([...newTodos]);

Comments

[退会済みユーザー]

state の仕組みからご教授いただきありがとうございます。
ご提案いただいた方法で無事に解決いたしました。
稚拙なミスでしたが丁寧に解説していただき感謝しております。