日本語

ReactJS チュートリアル

Hooks

ReactJSの高度な機能

追加の概念

ReactJS - 状態管理におけるFluxの使用

こんにちは、未来のReact魔法使いさんたち！今日は、Fluxを使用した状態管理の世界に興味深く飛び込みましょう。プログラミングが初めての方でも心配しないでください - 私があなたの親切なガイドになり、ステップバイステップで進めていきます。このチュートリアルの終わりには、プロのように状態を管理できるようになるでしょう！

ReactJS - Managing State Using Flux

状態とは何か、そしてなぜ管理する必要があるのか？

Fluxに飛び込む前に、まず状態について話しましょう。たとえば、タスク管理アプリを作成しています。タスクのリストはアプリの「状態」です。ユーザーがタスクを追加や削除するたびに、状態が変わります。これらの変更を効率的に管理することは、スムーズなユーザー体験にとって非常に重要です。

Fluxの理解

Fluxは、FacebookがReactアプリケーション内でのデータの流れを管理するために開発したアーキテクチャパターンです。アプリのデータの交通控制器のように考えてください。

Fluxの基本概念

  1. Actions: アプリ内で何が起こったかについての情報を運ぶメッセンジャーです。
  2. Dispatcher: Actionsを受け取り、適切なストアに送信する交通控制器です。
  3. Stores: アプリケーションのデータとロジックが存在します。
  4. Views: ストアからのデータを表示するReactコンポーネントです。

これを簡単な図で視覚化しましょう：

ユーザー操作 -> Action -> Dispatcher -> Store -> View

Fluxの実装：ステップバイステップガイド

ステップ1: プロジェクトのセットアップ

まず、新しいReactプロジェクトを設定しましょう。ターミナルを開き、以下のコマンドを実行します：

npx create-react-app flux-todo-app
cd flux-todo-app
npm install flux

ステップ2: Actionsの作成

Actionsはデータフローの開始点です。タスクを追加するシンプルなActionを作成しましょう：

// src/actions/TodoActions.js
import dispatcher from "../dispatcher";

export function addTodo(text) {
dispatcher.dispatch({
type: "ADD_TODO",
text: text
});
}

ここでは、addTodo関数を作成し、Actionにタイプとタスクのテキストをディスパッチします。

ステップ3: Dispatcherの設定

ディスパッチャはFluxアプリケーションの中央ハブです：

// src/dispatcher.js
import { Dispatcher } from "flux";

export default new Dispatcher();

これで、アプリ全体で使用する新しいディスパッチャインスタンスを作成します。

ステップ4: ストアの作成

ストアはアプリケーションの状態とロジックを保持します：

// src/stores/TodoStore.js
import { EventEmitter } from "events";
import dispatcher from "../dispatcher";

class TodoStore extends EventEmitter {
constructor() {
super();
this.todos = [];
}

createTodo(text) {
const id = Date.now();
this.todos.push({
id,
text,
complete: false
});
this.emit("change");
}

getAll() {
return this.todos;
}

handleActions(action) {
switch(action.type) {
case "ADD_TODO":
this.createTodo(action.text);
break;
default:
// 何もしない
}
}
}

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

export default todoStore;

このストアはActionをリスンし、タスクリストを更新し、変更イベントを発行します。

ステップ5: Reactコンポーネントの作成

次に、タスクを表示および操作するためのReactコンポーネントを作成しましょう：

// src/components/TodoList.js
import React, { useState, useEffect } from 'react';
import TodoStore from '../stores/TodoStore';
import { addTodo } from '../actions/TodoActions';

function TodoList() {
const [todos, setTodos] = useState(TodoStore.getAll());
const [newTodo, setNewTodo] = useState('');

useEffect(() => {
TodoStore.on("change", () => {
setTodos(TodoStore.getAll());
});
}, []);

const handleNewTodoChange = (e) => {
setNewTodo(e.target.value);
};

const handleAddTodo = () => {
addTodo(newTodo);
setNewTodo('');
};

return (
<div>
<h1>私のタスクリスト</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="新しいタスクを入力"
/>
<button onClick={handleAddTodo}>タスクを追加</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

このコンポーネントはTodoStoreの変更をリスンし、現在のタスクを表示し、新しいタスクを追加する機能を提供します。

ステップ6: 全てを組み合わせる

最後に、App.jsを更新して新しいTodoListコンポーネントを使用します：

// src/App.js
import React from 'react';
import TodoList from './components/TodoList';

function App() {
return (
<div className="App">
<TodoList />
</div>
);
}

export default App;

結論

おめでとうございます！ReactとFluxを使用してシンプルなタスク管理アプリを作成しました。学んだことを振り返ってみましょう：

  1. FluxはReactアプリケーションでの状態管理のためのアーキテクチャパターンです。
  2. Actions、ディスパッチャ、ストア、ビューで構成されています。
  3. データは一方向に流れます：Action -> ディスパッチャ -> ストア -> ビュー。

この一方向のデータフローにより、アプリが予測可能でデバッグがしやすくなります。より大きなアプリケーションを構築する際に、Fluxが提供する構造と明確さを appreciate することでしょう。

状態を効果的に管理することは、ジャグリングするのと同じです - 練習が必要ですが、一度慣れると非常に強力で楽しいものとなります！

codingを続け、好奇心を持ち、Reactを楽しんでください！

Credits: Image by storyset

前のチュートリアル:
ReactJS - テーブル
次のチュートリアル:
ReactJS - テスト