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

Posted 2023-02-22

【中文标题】安装了 redux-thunk 的 redux 操作中的异步函数错误

【英文标题】：async function error in redux action with redux-thunk installed

【发布时间】：2017-01-12 08:12:30

【问题描述】：

我已经安装了 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'
    )
)

【问题讨论】：

我将商店更改为const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore) export default function configureStore(initialState = ) const store = createStoreWithMiddleware(rootReducer, initialState) return store 并开始工作，但我不知道为什么

【参考方案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 应作为第三个参数输入。

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

【讨论】：

啊，我明白了，我用 compose 将 2 个增强器包装在一起，然后它起作用了，谢谢