安装了 redux-thunk 的 redux 操作中的异步函数错误

Question

我已经安装了 redux-thunk，我想我将它配置为文档。但是还是报错：Actions must be plain objects. Use custom middleware for async actions.

行动：

import fetch from 'isomorphic-fetch'

export { get_all_posts } from '../utils/http_functions'

export function fetchAllPosts(){
    return{
        type: 'FETCH_ALL_POSTS'
    }
}

export function receivedAllPosts(posts){
    return{
        type: 'RECEIVED_ALL_POSTS', 
        posts: posts
    }
}

export function getAllPosts(){
    return (dispatch) => {
        dispatch(fetchAllPosts())
        return fetch('/api/posts')
            .then(response => response.json())
            .then(json => {
                dispatch(receivedAllPosts(json))
            })
            .catch(error => {

            })
    }
}

商店：

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

const debugware = [];
if (process.env.NODE_ENV !== 'production') {
    const createLogger = require('redux-logger');
    debugware.push(createLogger({
        collapsed: true
    }));
}

export default function configureStore(initialState = {}){
    const store = createStore(
        rootReducer, 
        initialState, 
        window.devToolsExtension && window.devToolsExtension(), 
        applyMiddleware(thunk, ...debugware)
    )

    if (module.hot){
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers/index').default
            store.replaceReducer(nextRootReducer)
        })
    }

    return store
}

减速器：

export function posts(state = {}, action){
    switch(action.type){
        case 'RECEIVED_ALL_POSTS':
            return Object.assign({}, state, {
                'posts': action.posts
            })

        default:
            return state
    }
}

在 server.js 中，我使用代理服务器将“/api/”请求路由到我的后端服务：

app.all(/^\/api\/(.*)/, function api(req, res){
    proxy.web(req, res, {
        target: 'http://localhost:5000'
    })
})

Answer 1

因为在您的代码中：

const store = createStore(
    rootReducer, 
    initialState, 
    window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk, ...debugware)
)

函数applyMiddleware(thunk, ...debugware)实际上并没有应用。在createStore的文档中：http://redux.js.org/docs/api/createStore.html

createStore(reducer, [preloadedState], [enhancer])

您的applyMiddleware 应作为第三个参数输入。

注意：您在评论中的解决方案是另一种应用中间件的方法。