javascript - 如何修复我的 ReactJS Redux 应用程序中的 "Error: Reducers may not dispatch actions."？

Question

我正在使用我的笔记应用程序。我想在登录后从 Firebase 加载我的笔记，并在成功登录后显示我的笔记。

但是，当我添加注释时，应用程序显示“错误:Reducers 可能不会调度操作。”。我该如何解决这个问题？因为我需要在添加注释时监听并将收到的注释添加到我的应用程序列表中。无论错误如何，都会添加注释。

我知道这个错误意味着什么，但没有办法解决它。每当从 Firebase 添加笔记时，我都需要加载我的笔记。

此行触发错误:

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

我的 reducer 代码:

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) => {
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 => {
        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 > b.modifiedDate){
                    return -1;
                }

                if(a.modifiedDate < 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;
}

在我的 App.js 中，我触发“AUTH_LOGIN”的调度操作:

componentWillMount(){
    const previousNotes = Array(0);

    this.removeAuthListener = app.auth().onAuthStateChanged((user) => {

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

}

如果有人需要更多信息/代码，或者如果我不清楚，请告诉我，我将进一步解释/展示。

预期结果:实际结果:

错误:Reducers 可能无法调度操作。

Answer 1

实际上，调度应该从您的操作文件触发，而不是从 reducer 触发。在行动中，您应该向 firebase 发出请求。一旦数据从 firebase 返回，您应该从操作中分派(dispatch)，并且在 reducer 中您应该处理或分配该数据来存储变量。

如果有任何困惑，请告诉我。

谢谢