async function error in redux action with redux-thunk installed

Question

I have the redux-thunk installed and I think I configured it as documentation. But still get the error: Actions must be plain objects. Use custom middleware for async actions.

action:

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 => {

            })
    }
}

store:

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
}

reducer:

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

        default:
            return state
    }
}

in server.js, I am using proxy server to route the '/api/' request to my backend service:

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

I changed the store to const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore) export default function configureStore(initialState = {}){ const store = createStoreWithMiddleware(rootReducer, initialState) return store } and it started working, but i don't know why — Jie
– Jie, Commented Sep 5, 2016 at 1:12

Joy · Accepted Answer · 2016-09-05 15:53:20Z

1

Because in your code:

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

The function applyMiddleware(thunk, ...debugware) is actually not applied. In the document of createStore: http://redux.js.org/docs/api/createStore.html

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

Your applyMiddleware should be input as the third argument.

Note: Your solution in the comment is another approach to apply the middleware.

answered Sep 5, 2016 at 15:53

Joy

9,60011 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jie Over a year ago

ahh i see, i used compose to wrap 2 enhancers together, then it worked, thx

Collectives™ on Stack Overflow

async function error in redux action with redux-thunk installed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related