redux-thunk调度不起作用

Question

我在thunk和async分派方面有问题。 所以这是我的代码：

function fetchProvider() {
  return (dispatch) => {
    graphqlService(fetchProviderQuery)
      .then((result) => {
        dispatch({
          type: FETCH_PROVIDER,
          data: result.data.data.CurrentProvider,
        });
      });
  };
}

class Dashboard extends React.Component {
  componentDidMount() {
    this.props.fetchProvider();
  }

  render() {
    const { provider } = this.props;

    return (
      <div>
        <ul>
          <li>id: {provider.id}</li>
          <li>name: {provider.name}</li>
          <li>description: {provider.description}</li>
        </ul>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  provider: state.provider,
});

const mapDispatchToProps = (dispatch) => ({
  fetchProvider: () => dispatch(fetchProvider()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

我不知道为什么，但是在fetchProvider动作创建者内部进行分派不起作用。 graphqlService运作良好，并且在分派FETCH_PROVIDER操作时，传递给分派的操作数据是正确的，但是出了点问题，并且此操作未调用reducers。 有什么可能导致此问题？

Answer 1

终于我找到了问题。 这是由于react-router-redux中间件的初始化不正确引起的。 我将中间件构造函数传递给applyMiddleware，而不是构造的中间件。

Answer 2

您的重thunk也必须兑现承诺，否则将无法按预期工作。 只需稍微修改您的fetchProvider函数

function fetchProvider() {
  return (dispatch) => {
    return graphqlService(fetchProviderQuery)
      .then((result) => {
        dispatch({
          type: FETCH_PROVIDER,
          data: result.data.data.CurrentProvider,
        });
      });
  };
}