firebase, react-redux-firebaseモジュールのインストールと設定 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

モジュールのインストール

開発を始めるにあたり、firebaseのモジュールをインストールします。

$ yarn add firebase

次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをインストールします。

$ yarn add react-redux-firebase

react-redux-firebaseモジュールは、firebaseのデータをreduxシステムに組み込んでくれたり、firebaseにアクセスする関数を提供しているライブラリです。詳しくは公式ドキュメントを見てください。

Firebase config の作成

それでは、コーディングを始めていきましょう!(やっとコーディング!)

始めに、src ディレクトリにfirebaseディレクトリを作成します。その下にconfig.js という名前で新規ファイルを作成し、firebaseの設定を記載します。下にサンプルを示しましたので、自身の設定内容に置き換えてください。

src/firebase/config.js

const firebaseConfig = {
  apiKey: 'AxxxxxxxxxxxxxxxxxxxQ',
  authDomain: 'todo-sample-xxxxx.firebaseapp.com',
  databaseURL: 'https://todo-sample-xxxxx.firebaseio.com',
  storageBucket: 'todo-sample-xxxxx.appspot.com',
  messagingSenderId: '00000000000',
  projectId: 'todo-sample-xxxxx'
}

export default firebaseConfig;

自身の設定内容がわからない場合は、こちらの記事を参照してください。

yucatio.hatenablog.com

firebaseとreact-redux-firebaseの初期化

次に、src/index.jsを変更します。

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, compose } from 'redux'  // #1
import { reactReduxFirebase } from 'react-redux-firebase'  // #1
import firebase from 'firebase' // #1
import todoApp from './reducers'
import App from './components/App'
import firebaseConfig from './firebase/config'  // #1
import registerServiceWorker from './registerServiceWorker'

firebase.initializeApp(firebaseConfig);  // #2

const createStoreWithFirebase = compose(  // #3
  reactReduxFirebase(firebase, {})
)(createStore);

const store = createStoreWithFirebase(todoApp);  // #3

render (
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
  • composeをreduxから、reactReduxFirebaseをreact-redux-firebaseから、firebaseをfirebaseから、firebaseConfigを./firebase/configからそれぞれimportします。 (#1)
  • Firebaseを設定ファイルで初期化します。(#2)
  • reactReduxFirebaseをStoreに組み込みます (#3)

reducerの変更

続いてreducerにもreact-redux-firebaseの設定を追加します。

src/reducers/index.js

import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'  // 追加
import todos from './todos'
import visibilityFilter from './visibilityFilter'

export default combineReducers({
  firebase: firebaseReducer,    // 追加
  todos,
  visibilityFilter
})

以上でfirebaseとreact-redux-firebaseを使用してfirebaseにデータを登録したり読み込んだりする準備ができました。

動作確認

yarn start でサーバを起動し、 エラーが出ていないことを確認してください。

ChoromeのデベロッパーコンソールにFirebaseのwarningが出ますが、今のところ問題ありません。(解決方法がわかったら記載します。)

f:id:yucatio:20180925125110p:plain

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com