From 我的简书 https://www.jianshu.com/p/917dded33ca2
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://juejin.im/post/5bce9532f265da0ac962dc90