いつになったらRedux入門できるの？（6）firebaseのデータベース機能＝＞挫折

2016年12月23日

今度は、データベース機能も使用したくなった。

以下のサイトを写経してみる。

http://qiita.com/gonta616/items/278a7e81a8b624d9621e

（環境）
Windows8.1
Visual Studio Code

（１）Firebaseでプロジェクトを作成

https://console.firebase.google.com/

でログインして、新規プロジェクトを、「redux-todo-firebase」という名前で作成

（２）ローカルに、GitHubから、ソースコードを保存。

https://github.com/gonta616/react-redux-todos

ありがたいことに、上記サイトの方が、ソースコードをGitHubni公開してくださっているので、それをローカルにダウンロード。

今回は、　C:/js/redux-tudo-firebase/　フォルダにダウンロードして保存した。

Visual Studio Codeでフォルダを開いて、Ctrl + @ でコマンドプロンプト画面を出す。

コマンドプロンプトで、

firebase login
firebase init

適当に選択して、　Enter　を押していく。

途中で、firebaseでのプロジェクト名を聞かれるので、上記で新規作成した、「redux-todo-firebase」を選択してEnter　を押していく。SinglePageApplicationはよくわからないので、Enterを押したら、Noとなった。

npm run build

いきなりエラー。

そういえば、node_modulesフォルダがないぞ？

試しに、npm startしてみる。エラー。次、npm install してみる。

だいぶ時間がかかる。10分くらい？

npm run build

1分以内に完了

firebase.json　の修正

firebase deploy

（３）デプロイを確認

これはローカルストレージなので、リロードすると、データは消失する。

データベースに、firebaseを使用する！（引き続きこちらを写経する。）

（４）Firebase導入

npm i -S firebase

Firebaseの　Overview > ウェブアプリにFirebaseを追加する。の情報を、/firebase/config.js　を作成して、そこにコピペ

/firebase/index.js

database.rules.json

（５）Actionの変更

Reduxでは、ActionからHTTP通信することが推奨

/actions/todo.js

addTodo, updateTodo, deleteTodo　の変更

（６）Reducerの変更

/reducers/todo.js の変更

'ADD_TODO’, 'CHANGE_TODO’, 'DELETE_TODO’が’TODOs_RECEIVE_DATA’に一本化される

(before)

(after)

（７）

npm run build

案の定エラー。

src/reducers/todo.js　のどこかが間違っていると、、、

　のcase のあとに、「 ( 」を入れてしまっていたので消去。

再び npm run build

できた。。。のか！？

firebase deploy

真っ白、がっくし。。。

続きはまた今度、、、

npm start でローカルで確認。

（８）containersの変更

loadTodos を、https://github.com/gonta616/firebase-react-redux-todos　で検索すると（こういうときに、ソースコードを公開していただけているのは本当にありがたい）、以下のように、src/containers/App.js も変更していると。。。とほほ。

以下のようにsrc/containers/App.js　を修正
　

2個目のエラー

actions/todos.js の9行目、ref.on の .(ピリオド)が抜けていたので訂正。

この時点でエラーが1個に

firebaseapp のs　が抜けていたので修正。

localでは、動いたの、、、か？　→だめだった。フォームにtest1 と入力して、Enterを押しても、全く反映されない。

src/components/Todo.js を見てみる

いや、これは間違いはなさそう。

あれ？

src/reducers/todos.js

https://github.com/gonta616/firebase-react-redux-todos/blob/master/src/reducers/todos.js

もう、疲れたのでコピペ。