Ошибка асинхронной функции в действии redux с установленным redux-thunk

У меня установлен 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'
    })
})

person Jie    schedule 04.09.2016    source источник
comment
Я изменил магазин на const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore) export default function configureStore(initialState = {}){ const store = createStoreWithMiddleware(rootReducer, initialState) return store }, и он начал работать, но я не знаю почему   -  person Jie    schedule 05.09.2016


Ответы (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 должен быть введен в качестве третьего аргумента.

Примечание. Ваше решение в комментарии - это еще один подход к применению промежуточного программного обеспечения.

person Joy    schedule 05.09.2016
comment
ааа, я вижу, я использовал композицию, чтобы объединить 2 усилителя вместе, потом это сработало, спасибо - person Jie; 05.09.2016