justinwoo / actually-typing-your-react-redux-program

A guide for those who are stuck not being able to migrate their apps away from JS/TypeScript/Flow. See index.tsx

actually-typing-your-react-redux-program's Issues

What about?

import { connect } from 'react-redux'

type Dispatch<A> = (a: A) => void

function myconnect<S, A>(): <OP>() => <SP, DP>(
  f: (state: S, ownProps: OP) => SP,
  g: (dispatch: Dispatch<A>, ownProps: OP) => DP
) => (c: React.ComponentType<OP & SP & DP>) => React.ComponentClass<OP> {
  return () => (f, g) => (connect as any)(f, g)
}

Setup

type State = {
  count: number
}

type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' }

const appConnect = myconnect<State, Action>()

Usage

import * as React from 'react'

class Foo extends React.Component<{ message: string; inc: () => void; dec: () => void; style: object }> {}

// ConnectedFoo: React.ComponentClass<{ style: object }>
const ConnectedFoo = appConnect<{ style: object }>()(
  state => ({
    message: `Clicks: ${state.count}`
  }),
  dispatch => ({
    inc: () => dispatch({ type: 'INCREMENT' }),
    dec: () => dispatch({ type: 'DECREMENT' })
  })
)(Foo)

It looks equivalent but less verbose