redux-thunk 调度不起作用

Question

我对 thunk 和异步调度有疑问。所以这是我的代码：

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 时，传递给调度的操作数据是正确的，但随后出现问题，reducer 不会调用此操作。什么可能导致此问题？

Answer 1

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

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

Answer 2

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

redux-thunk 调度不起作用

redux-thunk dispatch does not work

javascript

reactjs

redux

redux-thunk