TypeScript recompose.compose函數代碼示例

export const callDevice = () =>
  compose(
    connect(
      undefined,
      (dispatch): InjectedDispatch => ({
        __injectedDispatch: dispatch,
      }),
    ),
    graphql<
      CallDeviceInjectedProps & InjectedDispatch,
      {},
      {deviceId: string; interfaceId: string; method: string},
      Partial<CallDeviceInjectedProps>
    >(
      gql`
        mutation($deviceId: String!, $interfaceId: String!, $method: String!) {
          callDevice(
            deviceId: $deviceId
            interfaceId: $interfaceId
            method: $method
          ) {
            id
          }
        }
      `,
      {
        props: ({
          mutate,
          ownProps: {__injectedDispatch: dispatch},
        }): CallDeviceInjectedProps => ({
          callDevice(call: Call) {
            return mutate!({
              variables: call,
            }).catch(() => {
              dispatch(
                action(actions.showSnackbar, {
                  label: 'Failed to call device',
                  type: 'warning' as 'warning',
                }),
              )
            })
          },
        }),
      },
    ),
  )

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import { compose, withState } from 'recompose';
import { AdvancedFilter as Component, Props as ComponentProps } from './advanced_filter';

export interface Props {
  /** Optional value for the component */
  value?: string;
  /** Function to invoke when the filter value is committed */
  commit: (value: string) => void;
}

export const AdvancedFilter = compose<ComponentProps, Props>(
  withState('value', 'onChange', ({ value }) => value || '')
)(Component);

 */

export default compose(
  connect(
    undefined,
    { getAllLinodeConfigs }
  ),
  lifecycle<
    OutterProps & { getAllLinodeConfigs: GetAllLinodeConfigsRequest },
    {}
  >({
    componentDidMount() {
      // tslint:disable-next-line:no-shadowed-variable
      const { linodeId, getAllLinodeConfigs } = this.props;
      getAllLinodeConfigs({ linodeId });
    },

    componentDidUpdate(prevProps) {
      // tslint:disable-next-line:no-shadowed-variable
      const { linodeId: prevLinodeId, getAllLinodeConfigs } = this.props;
      const { linodeId } = prevProps;

      if (linodeId === prevLinodeId) {
        return;
      }

      getAllLinodeConfigs({ linodeId });
    }
  })
);

import { getLinode as _getLinode } from 'src/store/linodes/linode.requests';
import { GetLinodeRequest } from 'src/store/linodes/linodes.actions';

interface OuterProps {
  linodeId: number;
}

/**
 * Get the Linode on mount and on linodeId change.
 */

export default compose<OuterProps, {}>(
  connect(
    undefined,
    { getLinode: _getLinode }
  ),
  lifecycle<OuterProps & { getLinode: GetLinodeRequest }, void>({
    componentDidMount() {
      const { linodeId, getLinode } = this.props;
      getLinode({ linodeId });
    },
    componentDidUpdate(prevProps) {
      const { linodeId: prevLinodeId } = prevProps;
      const { linodeId } = this.props;
      if (linodeId !== prevLinodeId) {
        _getLinode({ linodeId });
      }
    }
  })
);

import Player from "common/player/Player"
import { MeasureList } from "common/measure"

interface Inner {
  player: Player
  measureList: MeasureList
}

interface Outer extends Inner {
  playerPosition: number
}

interface Props extends Outer {
  onTick: (number) => void
}

export default compose<Inner, Outer>(
  withState("mbtTime", "updateMBTTime", 0),
  withHandlers<Inner & { updateMBTTime: (number) => void }, {}>({
    onTick: props => tick => props.updateMBTTime(props.measureList.getMBTString(tick, props.player.timebase)),
  }),
  lifecycle<Props, {}>({
    componentDidMount() {
      this.props.player.on("change-position", this.props.onTick)
    },
    componentWillUnmount() {
      this.props.player.on("change-position", this.props.onTick)
    }
  })
)