React-Redux：错误：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：React-Redux: Error: Actions must be plain objects. Use custom middleware for async actionsReact-Redux：错误：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2018-06-17 06:07:34
【问题描述】：

我已阅读有关此错误的多个来源，但我无法弄清楚我在这里做错了什么。我已经在使用自定义中间件，并且我相信我正确地返回了操作。有什么建议吗？

app.js

import React from "react";
import ReactDOM from "react-dom";
import { renderToString } from "react-dom/server";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';

import rootReducer from '../reducers';
import DataProvider from "./DataProvider";
import QuestionContainer from "./QuestionContainer";
import * as actions from "../actions";

const App = () => <QuestionContainer />;
const store = createStore(
    rootReducer,
    applyMiddleware(thunk)),
);

store
    .dispatch(actions.fetchQuestions())
    .then(() => response.send(renderToString(<Provider store={ store }><App /></Provider>)))

然后在actions.js中

export function fetchQuestions() {
    return (dispatch) => {
        return fetch('/api/questions')
            .then(response => response.json())
            .then(data => dispatch(loadRequestData(data)),
        )
    }
}

浏览器控制台显示的错误：

redux.js:208 Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (redux.js:208)
    at eval (index.js:12)
    at dispatch (redux.js:571)
    at eval (actions.js:35)

【问题讨论】：

标签： redux react-redux

【解决方案1】：

我认为这部分代码有问题：

store
.dispatch(actions.fetchQuestions())
.then(() => response.send(renderToString(<Provider store={ store }><App /></Provider>)))

当您创建异步调用时，您只想在实际操作中执行此操作，而不是 reducer/store。

所以你需要删除这行.then(() => response.send(renderToString(<Provider store={ store }><App /> 而不是这样做：

const app = (
        <Provider store={store}>
            <App />
        </Provider>
)

ReactDOM.render(app, document.getElementById('root'));

另外进行一些操作，这将有助于更新减速器中的存储。像这样的：

export const fetchBegin = () => ({
    type: 'FETCH_BEGIN'
})

export const fetchSuccess = (payload) => ({
    type: 'FETCH_SUCCESS'
    payload
})

export const fetchQuestions = () => {
    return (dispatch) => {
        dispatch(fetchBegin())
        return fetch('/api/questions')
            .then(response => response.json())
            .then(data => dispatch(fetchSuccess(data))
        )
    }
}

然后在reducers中制作：

const initialState = {
    call: [],
    loading: false
}

const reducer = (state = initialState, action){
    switch(action.type){
        case 'FETCH_BEGIN:
            return{
            ...state,
            loading: true,
        case 'FETCH_SUCCESS':
            return{
            ...state,
            call: action.payload,
            loading: false,
        }
        default:
            return state
    }
}

恕我直言，这应该可以工作。

【讨论】：