Question

我正在尝试在我的应用程序的侧栏中实现注销。侧栏还负责切换与另一状态有关的某些对话框。对话框状态似乎没有问题。但是，当我尝试调度注销操作时，会引发此错误

  Type '(dispatch: Dispatch<{ type: "[Auth] LOGIN_REQUEST"; payload: Credentials; } | { type: "[Auth] LOGIN_SUCCESS"; payload: Credentials; } | { type: "[Auth] LOGIN_FAILURE"; } | { type: "[Auth] LOGOUT"; }>) => { ...; }' is not assignable to type 'MapDispatchToPropsFactory<DispatchProps, OwnProps>'.
    Type '{ logout: () => { type: "[Auth] LOGOUT"; }; }' is not assignable to type 'MapDispatchToPropsFunction<DispatchProps, OwnProps>'.
      Type '{ logout: () => { type: "[Auth] LOGOUT"; }; }' provides no match for the signature '(dispatch: Dispatch<Action<any>>, ownProps: OwnProps): DispatchProps'.```

WHAT DOES IT MEAN PROVIDES NO MATCH FOR THE SIGNATURE! I've tried everything I can think of...

这是我将动作传递给（连接）的代码：

interface DispatchProps {
  showBreachForm: (isOpen: boolean) => void
  showOPIForm: (isOpen: boolean) => void
  showPreapprovalForm: (isOpen: boolean) => void
  toggleDialog: (isOpen: boolean) => void
  logout: () => void
}


const MapDispatchToProps = (dispatch: Dispatch<fromDialogActions.Actions>, ownProps: OwnProps) => ({
  showBForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showBForm(isOpen)),
  showOForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showOForm(isOpen)),
  showPForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showPForm(isOpen)),
  toggleDialog: (isOpen: boolean) => dispatch(fromDialogActions.actions.toggleDialog(isOpen)),
})

const MapLogoutToProps = (dispatch: Dispatch<fromActions.Actions>) => ({
  logout: () => dispatch(fromActions.actions.logout())
})

export default withRouter(
  connect<StateProps, DispatchProps, OwnProps>(
    MapStateToProps,
    MapLogoutToProps,
    MapDispatchToProps,
  )(SideBar as any)
)
//the error occurs in the above statement on MapLogoutToProps

进展：如果删除withRouter包装器，则Connect函数有效。但是，那需要在那里。也许类型冲突导致了问题？

Answer 1

mapDispatchToProps需要一个带有第二个可选参数ownProps的函数。

尝试以下代码：

const MapLogoutToProps = (dispatch: Dispatch<fromActions.Actions>, ownProps?: OwnProps) => ({
  logout: () => dispatch(fromActions.actions.logout())
})

如果它对MapLogoutToProps有帮助，那么MapDispatchToProps可能会出现类似的错误，因为connect的第三个参数应该是mergeProps，且签名不同。

Answer 2

这是我不知道COMPOSE函数的解决方案，而打字机调试对于解决这种情况毫无用处

const MapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => ({
  showBForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showBForm(isOpen)),
  showOForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showOForm(isOpen)),
  showPForm: (isOpen: boolean) => dispatch(fromDialogActions.actions.showPForm(isOpen)),
  toggleDialog: (isOpen: boolean) => dispatch(fromDialogActions.actions.toggleDialog(isOpen)),
  logout: () => dispatch(fromActions.actions.logout())
})


export default compose(
    withRouter
)(
  connect<StateProps, DispatchProps, OwnProps>(
    MapStateToProps,
    MapDispatchToProps,
  )(SideBar as any))

Redux无法在connect语句中识别调度动作

2 个答案: