★前回の記事
モジュールのインストール
開発を始めるにあたり、firebaseのモジュールをインストールします。
$ yarn add firebase
次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをインストールします。
$ yarn add react-redux-firebase
react-redux-firebaseモジュールは、firebaseのデータをreduxシステムに組み込んでくれたり、firebaseにアクセスする関数を提供しているライブラリです。詳しくは公式ドキュメントを見てください。
- Github : GitHub - prescottprue/react-redux-firebase: Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
- ドキュメント : Read Me · React 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;
自身の設定内容がわからない場合は、こちらの記事を参照してください。
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が出ますが、今のところ問題ありません。(解決方法がわかったら記載します。)
★次回の記事
★目次