为什么即使reactjs收到了数据，我的笔记为什么也没有显示/更新？

Question

I'm trying to load my notes from my Firebase database. Adding them goes fine and retrieving my notes is also fine (I can confirm that it's working via console and checking my firebase database by going to console.firebase.google.com).

I am using React-Redux for the first time on my project.

I already tried debugging and checking if the correct data has been shown by console logging the variables. Everything goes fine, however nothing is displayed or updated.

componentWillMount(){
    const previousNotes = Array(0);
    this.removeAuthListener = app.auth().onAuthStateChanged((user) => {
        app.database().ref().child('notities').on('child_added', snap => {
            if(snap.val().username === this.props.email){
                console.log('DB_ADDED');
                previousNotes.push({
                    id: snap.key,
                    noteContent: snap.val().noteContent,
                    modifiedDate: snap.val().modifiedDate
                });

                console.log("previousNotes", previousNotes);
                store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }});
        }
    });

import React from 'react';
import { connect } from "react-redux";

class NotesBody extends React.Component {
    render(){
        return(
            <ul>
                {
                    this.props.notes.map((note) => {
                        return <li key={note.id}>{note.noteContent}</li>
                    })
                }
            </ul>
        );
    }
}

function mapStateToProps(state){
    console.log("[STATE NOTESBODY]", state);

    return {
    notes: state.notes
    }
}

export default connect(mapStateToProps)(NotesBody);

import { createStore } from 'redux';
import { app } from '../config/config';

const initialState = {
    database: app.database().ref().child('notities'),
    notes: []
}

const reducer = (state = initialState, action) => {
    console.log("Reducer running", action.type);

    switch(action.type){
        default:
            break;

        case "DB_NOTE_ADDED":
            console.log("DB_NOTE_ADDED", action.payload.notes);
            state = {
                ...state,
                notes: action.payload.notes
            }
            break;
    }

    return state;
}

const store = createStore(reducer);

store.subscribe(() => {
    console.log("Store updated", store.getState());
});

export default store;

When my code has received the notes, it calls the dispatch function with the notes array in it:

var previousNotes = [
    { id: "1", noteContent: "Hoi" }
];
store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }})

Actual result:

Expected result:

EDIT: Added my action code. Now I only have 1 note loaded, if I implement the first solution below.

Answer 1

I suggest using some sort of loading state on that NotesBody.js component, just until you are sure your data is successfully stored. That being said add loading: true to your redux state, and only set it to false when you successfully get notes and update the state.

class NotesBody extends React.Component {
  render() {
    let notes = <p>Loading ...</p>;

    if (!this.props.loading) {
        notes = this.props.notes.map(note => (
            <li key={note.id}>{note.noteContent}</li>
        ));
    }
    return <ul>{notes}</ul>;
  } 
}

function mapStateToProps(state) {
  console.log("[STATE NOTESBODY]", state);

  return {
    notes: state.notes,
    loading: state.loading
  };
}

And your switch should look like this:

switch(action.type){
    default:
        break;

    case "DB_NOTE_ADDED":
        console.log("DB_NOTE_ADDED", action.payload.notes);
        state = {
            ...state,
            notes: action.payload.notes,
            loading: false
        }
        break;
}

PS. Don't forget to switch loading to true when you decide to request new notes from your API.

Answer 2

Well shoot me in the face.. I managed to get it working in this way:

function mapStateToProps(state){
    return {
        notes: state.notes,
        notesLength: state.notes.length
    }
}

If I add something else than the length of the notes, the problem rises again.. What the..