Redux公式のBasics TutorialでToDoリストを作ってみた

Reactで、状態管理ライブラリとしてよく使われるRedux。
使い方を調べようと、公式サイトにあるBasics TutorialでToDoリストを作りにチャレンジしてみた。
ただ、このチュートリアル、ステップ・バイ・ステップになっていないので、なんだかわかりにくい。

そこで、どんな内容なのか、簡単にメモを残します。

内容

チュートリアルは、こちら(英語)。

• Basic Tutorial: Intro · Redux
• https://redux.js.org/basics/basic-tutorial

Redux単独のチュートリアルのように見えるけど、じつはReactと組み合わせてToDo Listを作っている。

以下は、(ほぼ)同じ内容を日本語でなぞっている。

• React + Redux の基本的な使い方 - KDE BLOG
• https://kde.hateblo.jp/entry/2019/02/12/023325

こちらで、完成版のデモを試すことができる。

• todos - CodeSandbox
• https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos

はじめ方

ReactとReduxで作るので、create-react-appする。

$ create-react-app basic-tutorial-todo
$ cd basic-tutorial-todo
$ npm install --save redux react-redux redux-logger

ソースコード

ToDoリストのソースコードは、こちらで入手できる。
チュートリアルだけ読んでいても、全体像がわかりにくい。
デモ版をみるか、create-react-appしたところにソースコードを流し込んだ方がいいと思う。

Example: Todo List · Redux
https://redux.js.org/basics/example

Github - reduxjs/redux
https://github.com/reduxjs/redux/tree/master/examples/todos

ディレクトリ構成

完成すると、こんな構成になる。意外と大きい。

/basic-tutorial-todo
│  index.js
│  serviceWorker.js
├─actions
│      index.js
├─components
│      App.js
│      Footer.js
│      Link.js
│      Todo.js
│      TodoList.js
├─containers
│      AddTodo.js
│      FilterLink.js
│      VisibleTodoList.js
└─reducers
        index.js
        todos.js
        visibilityFilter.js

実行する

$ npm start

参考になるページ

Basic exampleは、ちょっと大きいので、こちらにもう少し小さいサンプルがある。

• React+Redux で Todoアプリを作ってみる │ Web備忘録
• https://webbibouroku.com/Blog/Article/react-redux-todo

そもそも、Reduxとは何なのか、これが分かりやすかった。

• Vanilla JSで学ぶRedux - Qiita
• https://qiita.com/ryota-murakami/items/2ed6b12943214ecfeeaf

ReactとReduxの連携は、これが参考になった。

• たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
• https://qiita.com/mpyw/items/a816c6380219b1d5a3bf