Question

这可能更像是一个设计问题而不是任何东西，但我试图在打字稿中开发一个连接组件，它需要调度方法，因为模态是一个特殊的雪花，因为它们是在DOM中，只是显示和隐藏。这会产生一个独特的问题，因为mapDispatchToProps仅在DOM中首次使用模型时被调用一次（预期行为）。后续调用将正确调用componentWillReceiveProps方法，但dispatch方法不可用作方法参数。因此，第一次执行时，ownProps中的mapDispatchToProps值不会包含＆＃34;权利＆＃34;属性。

根据下面的代码，connect方法会将dispatch方法放在组件的道具上。这就是为什么可以从render方法中的解构道具中提取该方法的原因。但是在这里使用render()方法发送调度代码感觉不对，我没有一个好的选择。想法？

NB ：请关注问题而不是批评语法，内容等......除非有实质性的相关内容。感谢。

export interface IModalContainerProps {
  isOpen: boolean
  modalType?: ConfirmationModalType
  cancelAction?: string
  successAction?: string
  dispatch?: (action: Action) => void
}

export const mapStateToProps = (state: any): any => {
  return {
    isOpen: isModalOpen(state),
    modalType: getModalType(state),
    successAction: getSuccessAction(state),
    cancelAction: getCancelAction(state)
  }
}

export const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps: any) => {
  return {
    dispatch
  }
}

class MC extends React.Component<IModalContainerProps> {

  public static defaultProps: Partial<IModalContainerProps> = {
    isOpen: false,
    modalType: null
  }

  public componentWillReceiveProps(nextProps: IModalContainerProps): void {
    console.log('updated props', nextProps)
  }

  @Bind()
  public render(): React.ReactElement<MC> {
    console.log('rendering modal')
    const { isOpen, modalType, cancelAction, successAction, dispatch } = this.props

    const handleCancel = () => {
      dispatch({ type: cancelAction })
    }
    const handleSubmit = () => {
      dispatch({ type: successAction })
    }

    return (
      <BaseModal automationTag={'hello'} containerClass={'goodbye'} isOpen={isOpen}>
        <!-- TODO: make generic -->
        <ConfirmationModal type={modalType} handleCancel={handleCancel} handleSubmit={handleSubmit}/>
      </BaseModal>
    )
  }
}
export const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(MC)

Answer 1

我并不完全明白你想做什么，但是因为没有人回答你这里是一个潜在的解决方案。

我不会将dispatch()传递给您的组件。您可以在handleCancel()中定义handleSubmit()和mapDispatchToProps()，并随意传递它们。像这样：

interface IIModalContainerDispatchProps {
    handleCancel: (type: string) => void;
    handleSubmit: (type: string) => void;
}

export const mapDispatchToProps = (dispatch: Dispatch<any>): IIModalContainerDispatchProps => {
    return {
        handleCancel: function (cancelAction: string): void {
            dispatch({ type: cancelAction });
        },
        handleSubmit: function (successAction: string): void {
            dispatch({ type: successAction });
        }
    };
}

然后，您可以在组件中调用this.props.handleCancel(cancelAction)和this.props.handleSubmit(submitAction)。除非我完全误解了你想要做的事情。

要使类型正常工作，您需要将调度和状态道具结合起来。

export interface IModalContainerStateProps {
    isOpen: boolean;
    modalType?: ConfirmationModalType;
    cancelAction?: string;
    successAction?: string;
}

type IModalContainerProps = IIModalContainerDispatchProps & IModalContainerStateProps;

将redux dispatch方法添加到typescript中的连接组件props

1 个答案: