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

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

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは

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経由で渡し、
子コンポーネントのほうでそれを使う

ようにしています。

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

投稿2019/09/11 15:31

jun68ykt

総合スコア9058

moriman

2019/09/12 05:19

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

jun68ykt

2019/09/12 06:20

コメントありがとうございます。 > ちゃんと動きました。とのことで、よかったです。 > 現在の私の認識だと、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

2019/09/12 07:08

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

jun68ykt

2019/09/12 07:23

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

moriman

2019/09/12 23:58

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

jun68ykt

2019/09/13 09:02

ご質問ありがとうございます。 > なぜ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 で上記コミットが反映されます。

行動規範の内容に同意します