Question

我有这个动作创建者：

type LoadOpenRequestsResult = ThunkAction<
  Promise<void>,
  IRootState,
  undefined,
  LoadOpenRequestsActions
>;

export const loadOpenRequests: ActionCreator<LoadOpenRequestsResult> = () => {
  [...]
};

然后在组件中像这样使用它：

public componentDidMount() {
  this.props.loadOpenRequests();
}

然后我使用mapDispatchToProps的对象版本连接我的React组件：

export default connect(
  mapStateToProps,
  { loadOpenRequests }
)(MaintenanceOpenListScreen);

异步操作完成后，我想做一些事情，像这样：

public componentDidMount() {
  await this.props.loadOpenRequests();
  doSomethingWhenThisAsyncIsDone();
}

但是this.props.loadOpenRequests();不是一个承诺。

这是否意味着我不能使用mapDispatchToProps的对象版本？

Answer 1

我在这里找到了解决方法：https://github.com/reduxjs/redux-thunk/issues/213#issuecomment-428380685

基本上，答案是肯定的，您不能使用mapDispatchToProps的对象版本。您必须使用如下功能版本：

public componentDidMount() {
  this.props.loadOpenRequests().then(() => doSomethingWhenThisAsyncIsDone());
}

[...]

const mapDispatchToProps = (
  dispatch: ThunkDispatch<IRootState, undefined, Action>
) => ({
  loadOpenRequests: () => dispatch(loadOpenRequests()),
});

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

Answer 2

您的组件将调度动作，如果您使用thunk，则动作可以是一个函数。此功能是一个函数，它将收到一个调度功能，您可以在其中调度操作以指示您开始，完成或未能完成某件事。

因此，当您的商店中有thunk中间件并调度一个作为函数的操作时，thunk将调用此函数并为其分配调度功能。

可以找到here

的thunk函数示例

function incrementAsync() {//function that create the action
  return dispatch => {//action is a function receiving dispatch
    dispatch(loading());//added this to show multiple actions can be dispatched
    setTimeout(() => {
      dispatch(result({hello:"world"}));//result is now available
    }, 1000);
  };
}

您的减速器看起来像这样：

(state,action)=>{
  if(action.type===LOADING){
    return {...state,loading:true};
  }
  if(action.type===RESULT){
    return {...state,loading:false,result:action.payload};
  }
  //if result does not indicate failure you may need a fail/error action
  //  to set loading false and a message indicating why it failed.
  return state;
}

现在，您可以使用props在componentDidMount中显示结果/加载和分发incrementAsync。

您可以使用redux connect映射要分派的动作处理程序，并将动作创建者添加到道具中，以便您可以轻松地在组件中分派动作。

Redux-Thunk-如何等待动作创建者完成

2 个答案: