同じアプリを Redux無しと Redux有りで作るサンプル

Question

Reduxの勉強のために同じアプリを Redux無し( reactのみ)と Redux有りで作っているサンプルを探しているのですが、何かありますでしょうか？
Redux有り無しでの対応関係を見るのが目的なので、できるだけシンプルなアプリがいいと考えています。(簡単すぎて、 Redux要らないやん、というものであっても)

Answer 1

こんにちは

Redux のチュートリアルにある Example: Todo List から初めて、何回かの修正を経て、 Redux 無しで全く同じ見た目、同じ機能になるものを作成して、以下のレポジトリに上げました。

• GitHub: jun68ykt/todo-without-redux

create-react-app でベースを作っており、以下で動かせると思います。

• git clone https://github.com/jun68ykt/todo-without-redux.git
• cd todo-without-redux
• yarn install
• yarn start

このレポジトリのコミット歴 の中で、最初のコミット では、Reduxチュートリアルに掲載されているソースコードをコピペして作成した各ファイルをコミットしており、古い順に各コミットを追って頂ければ、徐々に "Redux離れ" していくのを追っていけると思います。

修正の大まかな流れとしては、

• redux の state として持っていた情報を、App の this.state に持たせ、
• reducer で行っていたことを App のメソッドにして、子コンポーネントにprops経由で渡し、
• 子コンポーネントのほうでそれを使う

ようにしています。

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

Comments

[moriman]

こんにちは。いつもありがとうございます。
ちゃんと動きました。 Redux無しバージョンの
AddTodo.jsのAddTodoコンポーネントにpropsとして渡されるonAddメソッド(Appコンポーネントのメンバメソッド)なんですが、現在の私の認識だと、App.js側でbindしないとエラーが出るんじゃないかな？と思ってしまったんですが、この場合要らないんですかね？
実際エラー出てないので要らないんでしょうけど笑

[jun68ykt]

コメントありがとうございます。
> ちゃんと動きました。
とのことで、よかったです。

> 現在の私の認識だと、App.js側でbindしないとエラーが出るんじゃないかな？と思ってしまったんですが、この場合要らないんですかね？

はい。onAdd を

onAdd(text) {
・・・
}

と書いていたら、コンストラクターで

this.onAdd = this.onAdd.bind(this)

が必要ですが、アローを使って

https://github.com/jun68ykt/todo-without-redux/blob/master/src/containers/App.js#L17

onAdd = text => {
・・・
}

と書いているので .bind(this) が不要になります。

App の他のメソッド onToggle と、onChangeFilter　もアロー関数の形で書いているので、 .bind(this)をしていないです。

※ class の メソッドをアローを使って書けるようになったのは、いつからか？ということについては、 Ecma TC39 の仕様策定録を当たれば分かると思います。

[moriman]

なるほどですね！
この書き方は初めて見ました。何かこの書き方が一番すっきりしているように感じます。
サンプルを読み進めてまたわからないことが出てきたら質問させて頂きます。
ありがとうございました。

[jun68ykt]

どういたしまして。
> サンプルを読み進めてまたわからないことが出てきたら質問させて頂きます。
はい。いつでも welcome ですよ。

[moriman]

すみません。AddTodo.js内でRefを使用しており、初めてRefについて調べました。
結局ここでは入力ボックスに入力された値を取得するため(もっと詳しく言うと値を取得するために入力ボックス要素への参照を取得するため)にRefを使っていると思います。
ここで頭に浮かんだのが、「イベントオブジェクト(e)を引数として受けとっているので、
e.target.value
で入力値を取得できるのではないか？
ということなのですが、console.logでe.target.valueを見てみるとundefinedでした。
e.preventDefault()
を実行しているのでページ遷移は起こらないと思うのですが、なぜe.target.valueではダメなんでしょうか？
あとRefの使いどころについては公式ドキュメントにさらっと列挙されていましたが(具体的に)よくわからない段階なのですが、今回のこの処理はRef使わないとできないことでしょうか？だとするとまさにRefの使いどころ、ということになるのだと思いますが。

[jun68ykt]

ご質問ありがとうございます。

> なぜe.target.valueではダメなんでしょうか？

その e は、以下コード

　<form onSubmit={e => {　・・・

で、 <form> に設定されているonSubmit コールバックの引数として入ってくるイベントオブジェクトなので、 e.taget はこの<form>要素になります。ですので、e.taget.value に <input> で入力した値は入ってこないです。

何らかのイベントオブジェクト e として、 e.target.value で、<input> に入力された文字列が取得できるようにするには、<input> の値が変更されたときのイベント、すなわち change イベントのコールバックを
<input> に設定すればよいです。
このやり方で AddTodo コンポーネントを書き換えるとすると、

・AddTodoをクラスコンポーネントにし、
・this.state に input からの入力値を保持させ、
・ボタンがクリックされたときに、 this.state に入っているinputからの入力値を onAdd に渡す。
・ 上記により、<form> は不要になるので除去
・ <form>が無くなるので、<button> の type は submit ではなく button に修正

という変更になります。
その修正の一例を以下にてコミットしました。

input のchangeイベントから入力されたテキストを取得するように修正
https://git.io/JeYOE

もし、morimanさんがお手元にレポジトリをcloneして頂いているのでしたら、

git pull

で上記コミットが反映されます。

Answer 2

TodoMVCといういろいろなライブラリやAltJSを使った場合の例が載っているサイトがあります。Reactのみが公式ありますが、Reduxは公式にありません。しかしいくつかReduxで作った人がいますので、参考になると思います。

https://github.com/reduxjs/redux/tree/master/examples/todomvc
https://github.com/StephenCleary/todomvc-react-redux

Comments

[moriman]

解答を頂きましてありがとうございます。示して頂いたサンプル見てみます。

Answer 3

TODO Listなんかはどうでしょうか？
さいきんはReduxでなくてReact Hooksをつかうのが流行ってるらしいです。

Comments

[moriman]

Reduxを使ったTODOリストが Redux公式チュートリアルにあるんですが、 同じものをRedux無しで作ったサンプルはあるでしょうか？
自分で作ったらよろしいやん、と言われたらあれなんですけど。

[moriman]

解答を頂きましてありがとうございました。折を見てフックも見てみようと思います。