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

[johhansantana]

I haven't got this error but I think since the new 3.7.0 release this is poping up.

export const SET_STRING = 'SET_STRING';
/**
 * sets the string, if none is passed, it will default to the below string.
 * @param theString
 * @return {{type: string, theString: string}}
 */
export function setString(theString: string = 'the default string') {
  return {
    type: SET_STRING,
    theString
  };
}

This seems a pretty regular redux action no? What I'm doing wrong?

[Florian-R]

See #2279

[johhansantana]

@Florian-R I see what they explain there but I'm not sure how to fix it

in my container I have this

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as demoActions from '!/actions/demoActions';

...

function mapStateToProps(state) {
  return {
    demoString: state.demoString
  };
}

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

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

[elrumordelaluz]

@johhansantana Seems you have stuff exported at '!/actions/demoActions'that aren't functions (like export const SET_STRING…).

Try importing only the action creators from the file like:

import { anAction } from '!/actions/demoActions'

Here is a similar question I asked on SO.

[johhansantana]

@elrumordelaluz oh I see, so instead of import * as actions just import specific actions and in the bindActionCreators do
return bindActionCreators({action1, action2, action3}, dispatch);

Right? a big app would be annoying to fix, maybe change it to a warning instead?

[anishmprasad]

Try this

import { action1,action2, … } from '../action'
// component
export default connect(mapStateToProps,{
  action1,
  action2,
  …
})(component);

[timdorr]

This is a legit warning. You're attempting to pass in non-functions to bindActionCreators, which can have unexpected results. It's akin to React's change to not accept any unknown props on DOM-backed elements (e.g., <div foo="bar"> will generate a warning now).

You'll need to be more explicit about your imports and input to the function. This is a good practice regardless, as you're not expecting Redux to clean up after you. Also, most type systems (TS, Flow) should catch this for you already (prior to this version too). It's just a good practice.

[cameracker]

I take issue with the attitude that "best practice" recommendations can just be changed willy nilly with no regard to backwards compatibility or what the tool is advertising as best practice in its own documentation. We've locked to 3.6.0 but this has just created a lot of needless work without much warning.

I do get the reasoning behind the change, but I don't think this was handled in a consumer friendly way.

[timdorr]

Reverted and pushed out in 3.7.1. Thanks for the feedback everyone!