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操作数据是正确的但是出现问题并且reducers没有使用此操作调用。什么可能导致这个问题？

Answer 1

最后我发现了问题。这是由react-router-redux中间件的不正确初始化引起的。我通过中间件构造函数来应用中间件而不是构建的中间件。

Answer 2

您的thunk还必须返回承诺，否则它将无法按预期工作。只需稍微修改您的fetchProvider功能

即可

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

redux-thunk dispatch不起作用

2 个答案: