いつになったらRedux入門できるの?(6)firebaseのデータベース機能=>挫折

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

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

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

(環境)
Windows8.1
Visual Studio Code

(1)Firebaseでプロジェクトを作成

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

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

image

(2)ローカルに、GitHubから、ソースコードを保存。

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

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

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

image image

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

image

コマンドプロンプトで、

firebase login
firebase init

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

image image

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

image

npm run build

いきなりエラー。

image

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

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

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

image

npm run build

1分以内に完了

image

firebase.json の修正

image

firebase deploy

image

(3)デプロイを確認

image image

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

データベースに、firebaseを使用する!(引き続きこちらを写経する。)

(4)Firebase導入

npm i -S firebase

image

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

image image

/firebase/index.js

image

database.rules.json

image

(5)Actionの変更

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

/actions/todo.js

image

image

addTodo, updateTodo, deleteTodo の変更

image image

(6)Reducerの変更

/reducers/todo.js の変更

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

(before)
image

(after)
image

(7)

npm run build

案の定エラー。

image

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

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

再び npm run build

image

できた。。。のか!?

firebase deploy

image

image

真っ白、がっくし。。。

image

続きはまた今度、、、

npm start でローカルで確認。

image

image

(8)containersの変更

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

image

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

2個目のエラー

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

image

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

image

image

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

image

image

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

image

image

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

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

あれ?

src/reducers/todos.js

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

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

image

これで、npm start しても、ダメだった。。。もう、redux いや!

(9)がっくし。あきらめた。

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

からZIPファイルをダウンロードして、

npm install
npm i -S firebase
firebase/config.js を訂正して、
npm run build
firebase init
firebase deploy

でも、npm run build がエラーでできず、あきらめた。。。挫折。

そのあと、localhost:3000から、firebaseのデータベースに接続することはできたが、なんと、firebase deployができなくなった。ググッたが、原因不明。

image

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする