title: How to fix "Error: Reducers may not dispatch actions." in my ReactJS Redux app?
body: <p>I am using my notes application. I want to load my notes from Firebase after logging in, and my notes are displayed after I successfully log in. </p>
  
  <p>However, when I add a note, the app says "Error: Reducers may not dispatch actions.". How do I solve this issue? Since I need to listen when notes are added and add the received notes to my app list. The note is added regardless of the error.</p>
  
  <p>I know what the error means, but there is no way around it. I need to load my notes whenever one is added from Firebase.</p>
  
  <p>The error fires at this line:</p>
  
  <pre><code>store.dispatch({type: "DB_NOTE_ADDED", payload: {
      notes: previousNotes
  }});
  </code></pre>
  
  <p><b>My reducer code:</b></p>
  
  <pre><code>const initialState = {
  SCREEN_CURRENT: "home",
  authenticated: false,
  database: app.database().ref().child('notities'),
  notes: Array(0),
  loading: true,
  
  username: "",
  email: "",
  displayName: ""
  }
  
  const reducer = (state = initialState, action) =&gt; {
  console.log("Reducer running", action.type);
  
  switch(action.type){
  case "AUTH_LOGIN":
      if(action.payload.login === true){
          state = {
              ...state,
              authenticated: true,
              username: action.payload.username,
              email: action.payload.email,
              displayName: action.payload.displayName,
          }
  
  
  
      const previousNotes = Array(0);
  
      app.database().ref().child('notities').on('child_added', snap =&gt; {
          if(snap.val().username === state.email){
              console.log("DB_ADDED");
              previousNotes.push({
                  id: snap.key,
                  noteContent: snap.val().noteContent,
                  modifiedDate: snap.val().modifiedDate
              });
  
              previousNotes.sort(function(a, b){
                  if(a.modifiedDate &gt; b.modifiedDate){
                      return -1;
                  }
  
                  if(a.modifiedDate &lt; b.modifiedDate){
                      return 1;
                  }
  
                  return 0;
              });
  
              console.log("previousNotes", previousNotes);
  
  
              store.dispatch({type: "DB_NOTE_ADDED", payload: {
                   notes: previousNotes
              }});
  
              /* Below does not work (I already tried)
              state = {
                  ...state,
                  notes: previousNotes,
                  loading: false
              }
              */
          }
      });
  
  
  
  
  
  
  } else {
      state = {
          ...state,
          authenticated: false,
          username: "",
          email: "",
          displayName: ""
      }
  }
  break;
  
  return state;
  }
  </code></pre>
  
  <p>Inside my <code>App.js</code>, I fire the dispatch action of "AUTH_LOGIN":</p>
  
  <pre><code>componentWillMount(){
      const previousNotes = Array(0);
  
      this.removeAuthListener = app.auth().onAuthStateChanged((user) =&gt; {
  
      if(user){ 
          let displayName = (user.displayName != null ? user.displayName : user.email.slice(0, user.email.indexOf("@")));
          let username = (user.username === undefined ? user.email : user.username);
          let email = user.email;
  
          console.log(displayName);
          console.log(username);
  
      store.dispatch({ type: "AUTH_LOGIN", payload: {
        username, email, displayName, login: true
      } });
  
    } else {
      store.dispatch({ type: "AUTH_LOGIN", payload: {
        login: false
      } });
    }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>If anyone needs more info/code, or if I am unclear, please let me know and I will explain/show further.</p>
  
  <p>Expected result: <img src="https://i.imgur.com/4EVpQ8Q.png" alt="Expected result">
  Actual result: <img src="https://i.imgur.com/V71vFVe.png" alt="Actual result"></p>
  
  <p>Error: Reducers may not dispatch actions.</p>