Как исправить «Ошибка: Редукторы не могут отправлять действия».в моем приложении ReactJS Redux?

Question

Я использую приложение для заметок.Я хочу загрузить свои заметки из Firebase после входа в систему, и мои заметки отображаются после успешного входа в систему.

Однако, когда я добавляю заметку, приложение говорит: «Ошибка: редукторы могут не отправлять действия».,Как мне решить эту проблему?Так как мне нужно слушать, когда добавляются заметки, и добавлять полученные заметки в список приложений.Примечание добавляется независимо от ошибки.

Я знаю, что означает ошибка, но пути ее не существует.Мне нужно загружать свои заметки всякий раз, когда кто-то добавляется из Firebase.

В этой строке выдается ошибка:

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

Код моего редуктора:

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

}

Если кому-то нужна дополнительная информация / код или если мне неясно,пожалуйста, дайте мне знать, и я объясню / покажу дальше.

Ожидаемый результат: Фактический результат:

Ошибка: Редукторы не могут отправлять действия.

Answer 1

Фактически отправка должна быть инициирована из вашего файла действий, а не из редуктора.В действии вы должны сделать запрос в firebase.После того, как данные возвращены из firebase, вы должны отправлять их с действия, а в редукторе вы должны обрабатывать или назначать эти данные для хранения переменных.

Если возникнет путаница, пожалуйста, дайте мне знать.

Спасибо,

Answer 2

Потому что setTimeout создает отдельный поток.Неважно, откуда он вызывается, он просто отправляет все, что вы называете.Любая отправка всегда срабатывает и прыгает на редукторы.Обычно, если диспетчеризация начинает вызывать напрямую из редуктора, это будет бесконечный цикл, в котором он будет снова и снова вызывать редукторы.Вот почему мы не должны запускать диспетчеризацию от редуктора.

Answer 3

Я снова нашел свой ответ.Но почему это работает так, как работает?

https://github.com/reduxjs/redux-thunk/issues/122

Я должен использовать следующий код:

// store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }}); // Error: Reducers may not dipatch actions
setTimeout(() => { store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }}); }); // I should use this code