Reactでemitが効かない

Question

前提・実現したいこと

こちらの記事を元にReactのfluxを勉強中。
「動的にTodo リストが更新されるようにする」の部分でstore.jsにてemitを仕込み、consoleから動かしたが動的にリストが更新されず、原因不明。

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

console にてcreateTodo メソッドを打ち込んで新しいTodo を登録してみても、新しいTodoが登録されない。

該当のソースコード

// App.js（記事でいうTodo.jsに該当）
import './App.css';
import React from 'react';
import Todo from './components/todo';
import TodoStore from './stores/store';

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			// title: 'welcome',
			todos: TodoStore.getAll()
		};
	}

	// 初期化処理（storeの状態が変化したら再取得）
	componentDidMount() {
		TodoStore.on('change', () => {
			console.log('=== TodoStore changed ===');
			this.setState({
				todos: TodoStore.getAll()
			});
		});
	}

	render() {
		const { todos } = this.state;

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

		return (
			<div className="app">
				{/* step3 flux */}
				<section className="contents">
					<h2>Step3 fluxについて</h2>
					<ul>
						{ todoComponents }
					</ul>
				</section>
			</div>
		);
	}
}

export default App;

// store.js（記事でいうTodoStore.js）
import { EventEmitter } from 'events';

class TodoStore extends EventEmitter {
	// todo task
	constructor() {
		super();
		this.todos = [
			{
				id: 1630201746880,
				text: 'Go Shopping',
				complete: false
			},
			{
				id: 1630201754769,
				text: 'Pay Bills',
				complete: false
			}
		];
	}

	// todoリスト作成
	createTodo(text) {
		console.log("=== createTodo called ===");

		const id = Date.now();

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

		console.log(this.todos);
		this.emit('change');
	}

	// todoリスト取得
	getAll() {
		return this.todos;
	}
}

const todoStore = new TodoStore();

// デバックのためconsoleから呼び出せるよう追記
window.todoStore = new TodoStore();
export default todoStore;

試したこと

createTodoが正常に呼び出されているか確認 -> === createTodo called ===が実行されることを確認
componentDidMount()が動いているか確認 -> === TodoStore changed ===が実行されていないことを確認

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

create-react-appを用いて勉強しています。

Answer 1

TodoStore を 2 回 new しているため、store.ts から export してるもの (App で使ってるもの) と、グルーバル変数に設定したもの (console から呼び出すもの) が別々だからですね。

 const todoStore = new TodoStore();
 
 // デバックのためconsoleから呼び出せるよう追記
-window.todoStore = new TodoStore();
+window.todoStore = todoStore;
 export default todoStore;

Comments

[vnsa7221]

こちらいただいた修正方法で解決しました。ありがとうございます。
emitの使い方が悪いのかとずっと調べてましたが、それ以前の初歩的なミスでした。。。
大変失礼いたしました。。。