Как исправить «Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий».

Question

Я выполняю задание № 4 из курса «Разработка веб-интерфейса с помощью React» в Coursera.Здесь я хочу отправить данные формы на сервер и затем показать предупреждение пользователю.И код работает нормально, предупреждение также показывается, но затем происходит ошибка.

Из связанных постов в переполнении стека я понял, что проблема как-то связана с возвратом действия с избыточностью, которое должно иметь свойство типа.Но я не могу понять, как я могу вернуть это таким образом.Поскольку я не должен делать никаких действий.Мне просто нужно показать предупреждение.

export const postFeedback = (firstname, lastname, email, telnum, agree, contactType, message) => {
        const newFeedback = {
            firstname:firstname,
            lastname:lastname,
            email:email,
            telnum:telnum,
            agree:agree,
            contactType: contactType,
            message:message,
        }
        newFeedback.date = new Date().toISOString();
        return fetch(baseUrl + 'feedback', {
            method: "POST",
            body: JSON.stringify(newFeedback),
            headers: {
                "content-Type": "application/json"
            },
            credentials: "same-origin"
        })
        .then(res => {
            if (res.ok){
                return res
            }else{
                var error = new Error('Error '+ res.status + ': '+res.statusText);
                error.response = res;
                throw error;
            }},
            error => {
                throw error;
            })
            .then(response => response.json())
            .then(response => alert(response))
            .catch(error =>  { console.log('post feedback', error.message);
             alert('Your feedback could not be sent\nError: '+error.message);
             });
    }

Все отлично работает.обратная связь сохраняется в базе данных, а также выводится предупреждение, а затем появляется ошибка «Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий».произошло.

Answer 1

Наконец-то понял это, добавив действие, которое ничего не делает. Вот код, который работает как шарм. Я публикую это на тот случай, если кому-то может помочь

export const addFeedback = () => ({
    type: ActionTypes.ADD_FEEDBCK,
})
export const postFeedback = (firstname, lastname, email, telnum, agree, contactType, message) =>
 dispatch => {
        const newFeedback = {
            firstname:firstname,
            lastname:lastname,
            email:email,
            telnum:telnum,
            agree:agree,
            contactType: contactType,
            message:message,
        }
        newFeedback.date = new Date().toISOString();
        return fetch(baseUrl + 'feedback', {
            method: "POST",
            body: JSON.stringify(newFeedback),
            headers: {
                "content-Type": "application/json"
            },
            credentials: "same-origin"
        })
        .then(res => {
            if (res.ok){
                return res
            }else{
                var error = new Error('Error '+ res.status + ': '+res.statusText);
                error.response = res;
                throw error;
            }},
            error => {
                throw error;
            })
            .then(response =>  response.json())
            .then(res => {
                console.log(res);
                alert(JSON.stringify(res));
                return dispatch(addFeedback());
            })
            .catch(error =>  { console.log('post feedback', error.message);
             alert('Your feedback could not be sent\nError: '+error.message);
             });
    }

Answer 2

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

Пример: -

const myAction = () => {
    return (dispatch) => {
        let promise =  new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({type:'my_action', payload:{'sample': 'data'}})
            }, 1000)
        });

        promise.then((rsp) => {
            dispatch(rsp);
        })

        return promise;
    }
}

Answer 3

Если Redux является частью архитектуры вашего приложения, вы можете использовать промежуточное программное обеспечение redux-thunk: https://www.npmjs.com/package/redux-thunk

Вот общие настройки для вашего хранилища Redx:

import {createStore, applyMiddleware} from 'redux';  
import rootReducer from '../reducers/rootReducer';  
import thunk from 'redux-thunk';

export default function configureStore() {  
  return createStore(
    rootReducer,
    applyMiddleware(thunk)
  );
}
...

ИВот подробный ответ Дана Абрамова о том, почему мы можем захотеть его использовать: https://stackoverflow.com/a/34599594/5391520