怎样在React-redux应用中使用Firebase实时数据库
本文转载于:猿2048网站▶https://www.mk2048.com/blog/blog.php?id=hh1h0cajib
From 我的简书
Tags: react, react-redux, react-router, firebase.
最近在自学React, 在Safari online books这个平台上看了一套React的视频教程,非常幸运的是这位主讲把代码开源了。有兴趣的可以在这下载源码https://github.com/mannyhenri/working-with-redux, 我自己fork了这个项目,并在此基础之上,做了一些修改和学习。以下是我的提交历史my code
关于这个项目代码的一些说明,由于源码是从0开始使用react搭建一个简单的notepad项目的,所以,目录1-5是不涉及redux架构的。且在使用redux之前,原作者已经使用了firebase 实时数据库来同步数据。ps:firebase需要翻墙使用。
在后面的redux教程中,是在目录5的基础上搭建react-redux架构,但是用redux改写后,原作者没有使用firebase的数据库了。上图中的首次提交是我跟着视频敲的代码,完成redux架构的一个学习过程。然后我就想着,为啥不接着在此基础上,把firebase的实时数据库也应用到redux架构下呢。然后说干就干,反正是小白学习阶段嘛,坑还是要多踩点的,不然怎么进步呢?
接下说说下几个引入firebase做的几个调整。
首先在src目录下,添加config目录,新建firebase.js。
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;
接下来去修改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
}
}
最后来看一下程序的界面吧!
2018年5月22日更新:在原来的基础上加上了React Router页面导航功能,详见我的github https://github.com/ylzsmallsun/working-with-redux/commits/master/5.
更多专业前端知识,请上【猿2048】www.mk2048.com
原文地址:https://www.cnblogs.com/htmlandcss/p/11770663.html
- 传统数据库也能实现区块链存储
- golang(Go语言) byte/[]byte 与 二进制形式字符串 互转
- Sublime Text 最新注册码分享
- Lua table之弱引用
- 看吧,这就是现代化 PHP 该有的样子
- 从web图片裁剪出发:了解H5中的Blob
- Android子线程更新UI主线程方法之Handler
- Drawable.Bitmap.Canvas.Paint.Matrix
- 关于JSON.stringify和Unicode编码,需要注意的几点
- 用 PHP 的方式实现的各类算法合集
- Nginx 反向代理解决前后端联调跨域问题
- JavaScript对象length
- Go1.8.4和Go1.9.1版本发布
- Javascript数组操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深度学习环境配置指南!(Windows、Mac、Ubuntu全讲解)
- HTML+PHP实现多文件上传
- 一个让我欲罢不能的 GitHub 开源项目!
- vue 随记(5):性能的飞跃
- Keras2NCNN?Yes
- 【翻译】从头实现Rust异步执行器
- 说一下你常用的加密算法
- 深入研究 Node.js 的回调队列
- 【kalman filter】卡尔曼滤波器与python实现
- 一文带你响应式网页设计入门
- 图像增强 | CLAHE 限制对比度自适应直方图均衡化
- 一分钟速学 | NMS, IOU 与 SoftMax
- [译] 使用 TypeScript 开发 React Hooks
- 磁盘空间分析神器 - ncdu
- Kafka笔记—可靠性、幂等性和事务