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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

What about?

gcanti opened this issue · comments

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

are you planning to replace the typings for the definitely typed package?

and for me, i export the dispatch separately to test them (even though they are mostly logicless and should be mechanically correct by construction, just no telling with javascript)

are you planning to replace the typings for the definitely typed package?

Oh no, react-redux's APIs are a mess, I'm not going in that water. My policy with javascript libraries like that is wrapping with saner APIs (or override their typings).

lol, why didn't use flow which can actually INFER types unlike TypeScript (also have $Call type to call functions in compile-time)