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

Question

我将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;
    }
}

Answer 1

我认为你的错误可能是由以下原因引起的：

1. 您不会从您的动作创建者返回一个thunk (一个返回分派函数的函数)，这样Thunk中间件就不会捕捉到它(也许您正在返回一个承诺？)
2. 您没有按照dzeno的建议安装redux-thunk。

我建议您安装redux-记录器中间件，并将其添加到商店中间件中，作为最后一个中间件，删除如果返回thunk时不需要的承诺中间件。通过这种方式，所有的操作都被记录在控制台中(以前的状态、当前的动作、下一个状态)，并且您可以调试哪些操作对象类型没有被thunk中间件“消化”。

Answer 2

听起来好像你还没有安装/安装雷克。

您按照通常的方式安装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
}