★前回の記事 yucatio.hatenablog.com componentのファイルが多くなり、管理しづらくなってきたので、画面パーツごとにディレクトリを分けます。 現在のディレクトリ構成と変更後のディレクトリ構成です。 階層の移動と構成 以下に、src/components以下のファ…

★前回の記事 yucatio.hatenablog.com actionsの変更 actions/index.jsのサイズが大きくなってきたので、分割します。また、下記の点もリファクタリングします。 action typeを定数で定義する 個々のactionを定義する index.jsにaction typeをまとめます。 sr…

★前回の記事 yucatio.hatenablog.com getVisibleTodosを更新します。 todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェ…

★前回の記事 yucatio.hatenablog.com モジュールのインストール 開発を始めるにあたり、firebaseのモジュールをインストールします。 $ yarn add firebase 次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをイ…

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。 React + Reduxプロジェクトの作成 React + Reduxのプロジェクトの作成をします。 create-react-appを使用してReactアプリ…

ReactとReduxの勉強中です。react-reduxのconnect()の理解に時間がかかったので、同じように悩んでいる方に向けて図にして説明します。初心者向けの説明なので、正確さよりもわかりやすさを重視しています。 目次 Reduxの世界 Reactの世界 React-reduxの世界…