怎样在React-redux应用中使用Firebase实时数据库

栏目: IOS · Android · 发布时间: 6年前

内容简介:From我的简书Tags: react, react-redux, react-router, firebase.最近在自学React, 在Safari online books这个平台上看了一套React的视频教程,非常幸运的是这位主讲把代码开源了。有兴趣的可以在这下载源码https://github.com/mannyhenri/working-with-redux, 我自己fork了这个项目,并在此基础之上,做了一些修改和学习。以下是我的提交历史

From我的简书

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

最近在自学React, 在Safari online books这个平台上看了一套React的视频教程,非常幸运的是这位主讲把代码开源了。有兴趣的可以在这下载源码https://github.com/mannyhenri/working-with-redux, 我自己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实时数据库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

阿里巴巴Java开发手册

阿里巴巴Java开发手册

杨冠宝 / 电子工业出版社 / 2018-1 / 35

《阿里巴巴Java开发手册》的愿景是码出高效,码出质量。它结合作者的开发经验和架构历程,提炼阿里巴巴集团技术团队的集体编程经验和软件设计智慧,浓缩成为立体的编程规范和最佳实践。众所周知,现代软件行业的高速发展对开发者的综合素质要求越来越高,因为不仅是编程相关的知识点,其他维度的知识点也会影响软件的最终交付质量,比如,数据库的表结构和索引设计缺陷可能带来软件的架构缺陷或性能风险;单元测试的失位导致集......一起来看看 《阿里巴巴Java开发手册》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具