Redux-thunk异步操作:使用自定义中间件进行异步操作

时间:2016-08-13 08:48:48

标签: redux react-redux redux-thunk

我正在使用redux-thunk进行异步操作,使用babel-polyfill进行承诺。我收到以下错误:Error: Actions must be plain objects. Use custom middleware for async actions.

我通过在我的中间件中加入redux-promise解决了这个问题。我不确定为什么必须使用redux-promise来解决此问题,因为Redux文档中的所有示例都使用babel-polyfill。我应该继续使用redux-promise还是我可能会遇到babel-polyfill的问题?

babel-polyfill包含在我的应用入口点中:

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './components/App.jsx';
import store from './store.jsx';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.querySelector('.container'));

更新:

所以我检查一下,以防我安装了redux-thunk。它在我的package.json中。这是我的store.js

import thunkMiddleware from 'redux-thunk';
import promise from 'redux-promise'

export default store = createStore(
  rootReducer,
  defaultState,
  applyMiddleware(
    thunkMiddleware,
    promise
  )
);

这是我在action.js中的异步操作:

function receiveStates(json) {
    return {
        type: RECEIVE_STATES,
        states: json.states,
    };
}

export function fetchStates(uuid) {
    return dispatch =>
        fetch(`https://my-api.com/session/${uuid}`)
        .then(response => response.json())
        .then(json => dispatch(receiveStates(json)));
}

以下是我如何从组件调用操作:

fetchStates(sessionID) {
    this.props.dispatch(fetchStates(sessionID));
}
# I bind this function in component's constructor 
this.fetchStates = this.fetchStates.bind(this);

最后,这是我的减速机:

function statesReducer(state = null, action) {
    switch (action.type) {
        case RECEIVE_STATES:
            return { ...state, states: action.states };
        default:
            return state;
    }
}

2 个答案:

答案 0 :(得分:4)

我认为您的错误可能是由以下原因造成的:

  1. 你没有从你的动作创建者那里返回一个thunk(一个返回dispatch函数的函数),所以Thunk中间件没有捕获它(也许你正在返回一个promise?)
  2. 您没有按照dzeno
  3. 的建议安装redux-thunk

    我建议您安装redux-logger中间件并将其作为最后一个添加到您的商店中间件中,删除您返回thunk时不需要的promise中间件。 通过这种方式,所有操作都记录在控制台中(之前的状态,当前操作,下一个状态),您可以调试要返回的操作对象类型,而不是消化&#34;消化&#34;通过thunk中间件。

答案 1 :(得分:1)

听起来你还没有安装/设置redux-thunk

您可以通常的方式安装npm包:

npm install --save redux-thunk

以下是应用redux-thunk中间件

的示例

<强> getStore.js

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const getStore = ({combined, initial}) =>{
    var store = createStore(combined, initial, applyMiddleware(thunk))
    return store
}

export{
    getStore
}