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,
        });
      });
  };
}