如何在React-redux運用中運用Firebase及時數據庫

2019年8月24日 247次阅读 来源: ylzsmallsun

From 我的簡書

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

最近在自學React, 在Safari online books這個平台上看了一套React的視頻教程，異常榮幸的是這位主講把代碼開源了。有興緻的能夠在這下載源碼https://github.com/mannyhenri… 我本身fork了這個項目，並在此基本之上，做了一些修正和進修。以下是我的提交汗青my code

《如何在React-redux運用中運用Firebase及時數據庫》

關於這個項目代碼的一些申明，因為源碼是從0開始運用react搭建一個簡樸的notepad項目的，所以，目次1-5是不觸及redux架構的。且在運用redux之前，原作者已運用了firebase 及時數據庫來同步數據。ps:firebase須要翻牆運用。

在後面的redux教程中，是在目次5的基本上搭建react-redux架構，然則用redux改寫后，原作者沒有運用firebase的數據庫了。上圖中的初次提交是我隨着視頻敲的代碼，完成redux架構的一個進修歷程。然後我就想着，為啥不接着在此基本上，把firebase的及時數據庫也應用到redux架構下呢。然後說干就干，反恰是小白進修階段嘛，坑照樣要多踩點的，不然怎樣提高呢？

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

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

《如何在React-redux運用中運用Firebase及時數據庫》

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;

《如何在React-redux運用中運用Firebase及時數據庫》

接下往來來往修正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
    }
}

末了來看一下順序的界面吧！

《如何在React-redux運用中運用Firebase及時數據庫》

2018年5月22日更新：在本來的基本上加上了React Router頁面導航功用，詳見我的github https://github.com/ylzsmallsu…

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

    原文作者：ylzsmallsun
    原文地址: https://segmentfault.com/a/1190000015150789
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞