怎樣在React-redux應用中使用Firebase實時資料庫

ylzsmallsun發表於2019-02-19
ReactRedux資料庫

From 我的簡書

Tags: react, react-redux, react-router, firebase.

最近在自學React, 在Safari online books這個平臺上看了一套React的視訊教程，非常幸運的是這位主講把程式碼開源了。有興趣的可以在這下載原始碼https://github.com/mannyhenri/working-with-redux, 我自己fork了這個專案，並在此基礎之上，做了一些修改和學習。以下是我的提交歷史my code

clipboard.png

關於這個專案程式碼的一些說明，由於原始碼是從0開始使用react搭建一個簡單的notepad專案的，所以，目錄1-5是不涉及redux架構的。且在使用redux之前，原作者已經使用了firebase 實時資料庫來同步資料。ps:firebase需要翻牆使用。

在後面的redux教程中，是在目錄5的基礎上搭建react-redux架構，但是用redux改寫後，原作者沒有使用firebase的資料庫了。上圖中的首次提交是我跟著視訊敲的程式碼，完成redux架構的一個學習過程。然後我就想著，為啥不接著在此基礎上，把firebase的實時資料庫也應用到redux架構下呢。然後說幹就幹，反正是小白學習階段嘛，坑還是要多踩點的，不然怎麼進步呢？

接下說說下幾個引入firebase做的幾個調整。

首先在src目錄下，新增config目錄，新建firebase.js。

git history

firebase.js
firebase.js詳細程式碼如下:

import firebase from `firebase`;
// Initialize Firebase
const firebaseConfig = {
    apiKey: "AIzaSyC5kq1z62TiKnFJu-4Wm0akR8tLqWpiouo",
    authDomain: "notepad-4dbc2.firebaseapp.com",
    databaseURL: "https://notepad-4dbc2.firebaseio.com",
    projectId: "notepad-4dbc2",
    storageBucket: "notepad-4dbc2.appspot.com",
    messagingSenderId: "909505690107"
};
firebase.initializeApp(firebaseConfig);

const databaseRef = firebase.database().ref();
const notesRef = databaseRef.child("notes");

export default notesRef;
複製程式碼
firebase page

接下來去修改action.js檔案

import notesRef from `../config/firebase.js`;
import _ from `lodash`;

export const fetchNotes = () => async dispatch => {
    notesRef.on("value", snapshot => {
        const fbStore = snapshot.val();
        const store = _.map(fbStore, (value, id) => {
            return {
                id: id,
                title: value.title,
                details: value.details
            }
        });
        dispatch({
            type: `GET_NOTES`,
            payload: store
        });
    });
};

export const addNewNote = note => async dispatch => {
    notesRef.push(note, response => response);
};

export const removeNote = id => async dispatch => {
    notesRef.child(id).remove();
};

export const updateNote = note => async dispatch=> {
    notesRef.child(note.id).update({ details: note.details });
}
複製程式碼

然後再去修改reducers.js ，然後你會發現reducers.js程式碼少了很多有木有。為啥switch裡面只剩下一個‘GET_NOTES’的action呢？再回看上面的action檔案就能找到答案了。使用firebase的實時資料庫新增，刪除，修改記錄後都會觸發 notesRef.on(“value”這個事件，然後在它的callback裡讀取database的最新資料後，統一dispatch給一個‘GET_NOTES’型別的action,並將最新資料傳遞給payload。這樣到傳到reducers後就可以正確更新state了。
reducers.js

const initialState = {
    notes: [],
    name: `Smallsun`
}

export default (state = initialState, action) => {
    switch (action.type) {
        case `GET_NOTES`: 
            return {
                ...state,
                notes: action.payload
            }  
        default:
            return state
    }
}
複製程式碼

最後來看一下程式的介面吧！

notepad page

2018年5月22日更新：在原來的基礎上加上了React Router頁面導航功能，詳見我的github github.com/ylzsmallsun….

參考文章：
medium.com/quick-code/…

相關文章