redux / react-redux definitions with redux-thunk

[chrisblossom]

Thank you so much for these redux / react-redux definitions. They are working great.

Couple things, any idea how to get them work with redux-thunk? I tried adding the lines found here: reduxjs/redux#1887 (comment) but it only cleared a couple of the errors.

EDIT: https://github.com/chrisblossom/todos-flow-issues

[gcanti]

In order to dispatch thunks you can overload Dispatch. Alas if you want to use store.dispatch directly the only idea I got so far is an ugly coercion

// @flow
import React from 'react'
import { render } from 'react-dom'
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'
import type { Store, Dispatch } from './types'

import { promiseThunkAction1, thunkAction1 } from './actions/thunks';

type EnhancedDispatch = Dispatch &
  (thunk: typeof thunkAction1) => string &
  (thunk: typeof promiseThunkAction1) => Promise<string>;

const store: Store = createStore(reducer, applyMiddleware(thunk))
// ugly unsafeCoerce
const dispatch: EnhancedDispatch = ((store.dispatch: any): EnhancedDispatch)

const result: string = dispatch(thunkAction1('initial sync', 'thunk'))
console.log(result)
console.log('-')
dispatch(promiseThunkAction1('initial async', 'thunk'))
  .then((result: string): string => {
    console.log(result)
    return 'async really done'
  })
  .then((result: string): string => {
    console.log(result)

    console.log('rendering app...')
    console.log('-')

    render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )
    return ''
  })
  .catch(error => {
    console.error(error)
    console.log('-')
    return error
  })

[chrisblossom]

Thanks for the suggestion. I pushed the changes and still have one error left. Not sure how it is getting past the typeof promiseThunkAction1.

src/containers/thunks/RunAsyncThunk.js:23
 23:         .then((result: string): string => {
              ^^^^ property `then`. Property not found in
 42:   (thunk: typeof thunkAction1) => string &
                                       ^^^^^^ String. See: src/types/index.js:42

src/index.js:22
 22:   .then((result: string): string => {
        ^^^^ property `then`. Property not found in
 42:   (thunk: typeof thunkAction1) => string &
                                       ^^^^^^ String. See: src/types/index.js:42

Also, not related related to facebook/flow#2521 (comment), it the last component that isn't passing props correctly is <UseWrappedContext />: Footer.js#L20

Would really appreciate what I am missing here. Works everywhere else as expected.

[gcanti]

replace the Dispatch definition in types/index.js with the EnhancedDispatch definition above

for the UseWrappedContext issue, could you please update the todos-flow-issues repo with your changes?

[chrisblossom]

I am sorry, I didn't notice my git failed to push yesterday. It has been updated.

I did replace the Dispatch definition inside of index.js#L41.

[gcanti]

The type definition

export type Dispatch = ReduxDispatch<Action> &
  (thunk: typeof thunkAction1) => string &
  (thunk: typeof promiseThunkAction1) => Promise<string>;

seems to confuse flow. The following definition works better

type Thunk<A> = (thunk: (dispatch: Dispatch, getState: GetState) => A) => A;

export type Dispatch = ReduxDispatch<Action> &
  Thunk<string> &
  Thunk<Promise<string>>;

[chrisblossom]

That worked, but for some reason is causing some babel-plugin-tcomb errors in my main app. Not sure why, wish I better understood how to track down these errors.

/Users/chris/github/app/node_modules/tcomb/lib/fail.js:2
  throw new TypeError('[tcomb] ' + message);
        ^
TypeError: [tcomb] Invalid argument types [
  "Function",
  null,
  "Function"
] supplied to intersection(types, [name]) combinator (expected an array of at least 2 types)
    at Function.fail (/Users/chris/github/app/node_modules/tcomb/lib/fail.js:2:9)
    at assert (/Users/chris/github/app/node_modules/tcomb/lib/assert.js:14:12)
    at Function.intersection (/Users/chris/github/app/node_modules/tcomb/lib/intersection.js:17:5)
    at Object.module.exports.Object.defineProperty.value (/Users/chris/github/app/build/web/server.js:4693:99)
    at __webpack_require__ (webpack:///webpack/bootstrap 853e9aecd64cf7559449:19:1)
    at Object.module.exports.Object.defineProperty.value (webpack:///./src/redux/redux.js.flow:32:1)
    at __webpack_require__ (webpack:///webpack/bootstrap 853e9aecd64cf7559449:19:1)
    at Object.module.exports.Object.defineProperty.value (webpack:///./src/redux/create.js:6:1)
    at __webpack_require__ (webpack:///webpack/bootstrap 853e9aecd64cf7559449:19:1)
    at Object.<anonymous> (webpack:///./src/server.js:31:1)
    at __webpack_require__ (webpack:///webpack/bootstrap 853e9aecd64cf7559449:19:1)
    at Object.<anonymous> (webpack:///webpack/bootstrap 853e9aecd64cf7559449:39:1)
    at __webpack_require__ (webpack:///webpack/bootstrap 853e9aecd64cf7559449:19:1)
    at webpack:///webpack/bootstrap 853e9aecd64cf7559449:39:1
    at Object.<anonymous> (webpack:///webpack/bootstrap 853e9aecd64cf7559449:39:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

[gcanti]

based on the stack trace should be in app/build/web/server.js

wish I better understood how to track down these errors

If you enable the debugger, it should point to the offending line

[chrisblossom]

When you say "enable the debugger" are you talking about node/chrome's debugger?

I made a branch that has babel-plugin-tcomb enabled. I ran npm run eject on create-react-app as I wasn't sure how to modify the babel configuration.

https://github.com/chrisblossom/todos-flow-issues/tree/eject

thunks.js#L18 is how I was able to get around the issue in my app( define the thunk type each time), but doesn't seem to work here.

I am guessing the issue has to do with how/the order the files are being imported/required.