TypeScriptでRedux.connectのラップ関数を作りたいのです

Question

export default connect(
  (state: ReduxState) => ({ state }),
  (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
  ({state}, {dispatch}, onwProps) => ({
    actions: new ActionDispatcher(dispatch, state),
    value: state.counter,
  })
)(Counter);

上記conncetを毎回書くのが面倒なので上手くラップする関数が作りたいんです。

まず、非同期処理を行うためにActionDispacherを作りました。非同期処理を行えるクラスです。
参考資料：React + Redux + TypeScriptの最小構成

うごくソースコードはこちらです。

counterコンポーネントを以下の構成で作っています

• 今回見ていただきたいActionDispacher

src/counter/Container.tsx

import { Counter } from './Counter';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { decrementAmount, incrementAmount } from './module';
import { ReduxAction, ReduxState } from '../store';

export class ActionDispatcher {
  constructor(private dispatch: (action: ReduxAction) => void, rootState: ReduxState) { }

  public increment(amount: number) {
    this.dispatch(incrementAmount(amount));
  }

  public decrement(amount: number) {
    this.dispatch(decrementAmount(amount));
  }
}

/* 少し複雑 */
export default connect(
  (state: ReduxState) => ({ state }),
  (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
  ({state}, {dispatch}, onwProps) => ({
    actions: new ActionDispatcher(dispatch, state),
    value: state.counter,
  })
)(Counter);

• UI

src/counter/Counter.tsx

import * as React from 'react';
import { CounterState } from './module';
import { ActionDispatcher } from './Container';

interface Props {
  value: CounterState;
  actions: ActionDispatcher;
}

export class Counter extends React.Component<Props> {

  render() {
    return (
      <div>
        <p>score: {this.props.value.num}</p>
        <button onClick={() => this.props.actions.increment(3)}>Increment 3</button>
        <button onClick={() => this.props.actions.decrement(2)}>Decrement 2</button>
      </div>
    );
  }
}

• reducer

counter/module.tsx

// ActionCreator
import { Action } from 'redux';

enum ActionNames {
  INC = 'counter/increment',
  DEC = 'counter/decrement',
}

interface IncrementAction extends Action {
  type: ActionNames.INC;
  plusAmount: number;
}
export const incrementAmount = (amount: number): IncrementAction => ({
  type: ActionNames.INC,
  plusAmount: amount
});

interface DecrementAction extends Action {
  type: ActionNames.DEC;
  minusAmount: number;
}

export const decrementAmount = (amount: number): DecrementAction => ({
  type: ActionNames.DEC,
  minusAmount: amount
});

// reducer
export interface CounterState {
  num: number;
}

export type CounterActions = IncrementAction | DecrementAction;

const initialState: CounterState = { num: 0 };

export default function reducer(state: CounterState = initialState, action: CounterActions): CounterState {
  switch (action.type) {
    case ActionNames.INC:
      return { num: state.num + action.plusAmount };
    case ActionNames.DEC:
      return { num: state.num - action.minusAmount };
    default:
      return state;
  }
}

上記は動く構成です。

ここで注目していただきたいのはsrc/counter/Container.tsxです。

export default connect(
  (state: ReduxState) => ({ state }),
  (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
  ({state}, {dispatch}, onwProps) => ({
    actions: new ActionDispatcher(dispatch, state),
    value: state.counter,
  })
)(Counter);

connectの呼び出しが複雑なので汎用のラップ関数を作ろうと思いました。 しかし上手く行きません。

とりあえず書いてみました。

import { Counter } from './Counter';
import * as ReactRedux from 'react-redux';
import { Dispatch } from 'redux';
import { decrementAmount, incrementAmount } from './module';
import { ReduxAction, ReduxState } from '../store';

export class ActionDispatcherBase {
  constructor(protected dispatch: (action: ReduxAction) => void, rootState: ReduxState) { }
}

export class ActionDispatcher extends ActionDispatcherBase {

  public increment(amount: number) {
    this.dispatch(incrementAmount(amount));
  }

  public decrement(amount: number) {
    this.dispatch(decrementAmount(amount));
  }
}

interface MyMergeProps<T> {
  (state: ReduxState, dispatch: Dispatch<ReduxAction>, onwProps: T): T;
}

function Myconnect<T>(actionDispatcher: typeof ActionDispatcherBase, mergeProps: MyMergeProps<T>) {
  return ReactRedux.connect(
    (state: ReduxState) => ({ state }),
    (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
    ({ state }, { dispatch }, onwProps: T) => {
      const pp = mergeProps(state, dispatch, onwProps);
      return (
        Object.assign({}, {
          actions: new actionDispatcher(dispatch, state)
        }, pp)
      );
    });
}

// export default ReactRedux.connect(
//   (state: ReduxState) => ({ state }),
//   (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
//   ({ state }, { dispatch }, onwProps) => ({
//     actions: new ActionDispatcher(dispatch, state),
//     value: state.counter,
//   })
// )(Counter);
export default Myconnect(
  ActionDispatcher, (state, dispatch, ownprops) => ({
  value: state.counter,
}))(Counter);

最終的に

export default Myconnect(
  ActionDispatcher, (state, dispatch, ownprops) => ({
  value: state.counter,
}))(Counter);

のような呼び出してRedux Stateとの連携ができるコンポーネントが作れるのが理想なのですが上手く行きません。
どう記述すればいいかご教授下さい

Answer 1

自己解決しました。
最終的に以下のように書くことができるようになりました

export default Myconnect<Props>(
  ActionDispatcher, (state, dispatch, ownProps) => ({
  ...ownProps,
  value: state.counter,
}))(Counter);

変更点：

import { Counter, Props } from './Counter';
import * as ReactRedux from 'react-redux';
import { Dispatch } from 'redux';
import { decrementAmount, incrementAmount } from './module';
import { ReduxAction, ReduxState } from '../store';

export class ActionDispatcherBase {
  constructor(protected dispatch: (action: ReduxAction) => void, rootState: ReduxState) { }
}

export class ActionDispatcher extends ActionDispatcherBase {

  public increment(amount: number) {
    this.dispatch(incrementAmount(amount));
  }

  public decrement(amount: number) {
    this.dispatch(decrementAmount(amount));
  }
}

interface MyMergeProps<T extends {actions: ActionDispatcherBase}> {
  (state: ReduxState, dispatch: Dispatch<ReduxAction>, ownProps: T): T;
}
function Myconnect<T extends {actions: ActionDispatcherBase}>(
    actionDispatcher: typeof ActionDispatcherBase, 
    mergeProps: MyMergeProps<T>): ReactRedux.InferableComponentEnhancer<T>  {
  return ReactRedux.connect(
    (state: ReduxState) => ({ state }),
    (dispatch: Dispatch<ReduxAction>) => ({ dispatch }),
    ({ state }, { dispatch }, ownProps: T) => {
      const pp = mergeProps(state, dispatch, ownProps);
      return (
        Object.assign({}, pp, { actions: new actionDispatcher(dispatch, state)})
      );
    });
}

export default Myconnect<Props>(
  ActionDispatcher, (state, dispatch, ownProps) => ({
  ...ownProps,
  value: state.counter,
}))(Counter);