How to use Firebase real-time database in React-redux application

How to use Firebase real-time database in React-redux application

From my short book

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

I recently learned React by myself and watched a set of React video tutorials on the Safari online books platform. Fortunately, this speaker made the code open source. Those who are interested can download the source code here https://github.com/mannyhenri/working-with-redux, I fork this project myself, and on this basis, I made some modifications and learning. The following is my submission history my code

For some instructions on the code of this project, since the source code is used to build a simple notepad project using react from 0, the directory 1-5 does not involve the redux architecture. And before using redux, the original author has used firebase real-time database to synchronize data. ps: Firebase needs to be used over the wall.

In the redux tutorial that follows, the react-redux architecture is built on the basis of catalog 5, but after rewriting with redux, the original author does not use the firebase database. The first submission in the picture above is the code I typed following the video to complete a learning process of the redux architecture. Then I thought, why not continue to apply the real-time database of firebase to the redux architecture on this basis. Then just do it. It's Xiaobai's learning stage anyway, so I need to step on more pits, otherwise how can I make progress?

Let's talk about the next few adjustments made by introducing firebase.

1. under the src directory, add the config directory and create a new firebase.js.

The detailed code of firebase.js firebase.js is as follows:

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;
 

Next go to modify the action.js file

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 });
}
 

Then go to modify reducers.js, and then you will find that the reducers.js code is a lot less. Why is there only one'GET_NOTES' action left in the switch? Look back at the action file above to find the answer. Use firebase's real-time database to add, delete, and modify records will trigger the notesRef.on("value" event, and then read the latest data of the database in its callback, uniformly dispatch to a'GET_NOTES' type action, and Pass the latest data to the payload. Then the state can be updated correctly after it is passed to the reducers. 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
    }
}
 

Finally, take a look at the interface of the program!

Update on May 22, 2018: Added React Router page navigation function on the original basis, see my github github.com/ylzsmallsun... for details .

Reference article: medium.com/quick-code/...