无法调用`bindActionCreators`，因为`Action` [1]与`ActionCreator`不兼容

Question

I have a React-Redux app and I'm using Flow for the types (I've followed the official guide here ). Everything works just fine but I keep getting this annoying error message that I can't figure out how to solve:

Cannot call bindActionCreators because Action 1 is incompatible with ActionCreator

The error is in mapDispatchToProps in the main component, App:

App.js

import { bindActionCreators } from 'redux'

import * as actions from '../actions/index'
import type { Action, Dispatch } from '../actions/index'
// ... more imports

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    boundActionCreators: bindActionCreators(actions, dispatch)
  }
}

// ... mapStateToProps, class definition and so on

Then I have all my actions defined in actions/index like so:

actions/index.js

export type ToggleLoading = {
    type: "TOGGLE_LOADING",
    loading: boolean
}

function toggleLoading (loading: boolean): ToggleLoading {
  return { type: 'TOGGLE_LOADING', loading }
}

export type Action = ToggleLoading | ...

export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any
export type PromiseAction = Promise<Action>
export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any

export{
  toggleLoading
}

Have anyone any idea what is the cause of this error? Maybe just Flow?

Answer 1

Simply return bindActionCreator in your mapDispatchToProps:

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actions, dispatch)

I've read and use this blog post to setup Flow/React/Redux:

type checking react redux

Answer 2

I got this error too today. It's a strange error because even though I had the same pattern on other files, I'm getting this error on only one of the files. What I did was switched from node@6 to node@8 and it fixed the error for me. However, I still find it strange why would I get the error only on a specific file and not the others which pretty much have the same code.