bindActionCreators expected a function actionCreator for key 'ACCOUNT_LOGIN', instead received type 'string'

Question

bindActionCreators expected a function actionCreator for key 'ACCOUNT_LOGIN', instead received type 'string'.

I started getting this error today out of the blue for all bindActionCreators in the app.
I even went to older GIT history where i'm sure i wasn't having this error, and now it's there too.
The app still works, but the errors pop-up on each route change.

Anyone had this problem before? Or any idea where it could came from? I can provide more code, if bellow is not sufficient.

Container:

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import account from '../components/account';
import * as AccountActions from '../actions/account';

function mapStateToProps(state) {
  return {
    username: state.account.username,
    password: state.account.password,
    loggedIn: state.account.loggedIn,
    registred: state.account.registred,
    loading: state.account.loading,
    clientId: state.account.clientId
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(AccountActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(account);

Action:

export const ACCOUNT_LOGIN = 'ACCOUNT_LOGIN';

export function login(username, password) {
    return {
      type: ACCOUNT_LOGIN,
      username,
      password,
      loggedIn: false,
      loading: false
    };
  ...

Reducer:

import {
  ACCOUNT_LOGIN,
} from '../actions/account';

type actionType = { type: string };

const initialState = {
  username: '',
  password: '',
  loggedIn: false,
  registred: false,
  loading: false,
  clientId: ''
};

export default function account(state = initialState, action: actionType) {
  switch (action.type) {
    case ACCOUNT_LOGIN:
      return Object.assign({}, state, {
        username: action.username,
        password: action.password,
        loggedIn: action.loggedIn,
        loading: action.loading
      });
}

Error:

Answer 1

You are exporting a constant as _ACCOUNT_LOGIN_ and then importing * as AccountActions.

Since v3.7.0 redux warn about the non an Action Creator is not a function. See more in the pull request.

Try importing the necessary actions like:

import { login, … } from '../actions/account'

Anyway, for what I test, the functionality of the application should work properly but showing probably a bunch of warns.

---

Not directly related tip: You could use action creators directly in connect() method like:

import { login, … } from '../actions/account'

// …

export default connect(mapStateToProps,{
  login,
  …
})(account);

Answer 2

I found a nice approach to filter imported object (with lodash), and left only functions inside of it. It helps.

import * as itemActions from "../actions/itemActions"; // here i have strings also
const filteredActions = _.pickBy(itemActions, _.isFunction);

export default connect(
    mapStateToProps,
    filteredActions
)(ItemContent)