Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building Applications with React and Redux Putting it all Together Connecting the Scoreboard Container to Redux

Edwin Carbajal
Edwin Carbajal
4,133 Points

bindActionCreators error

Followed Guil and the code from the video but i get an error I don't understand. Here is my Scoreboard.js code:

import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PlayerActionCreators from '../actions/player';
import Player from '../components/Player';
import Header from '../components/Header';
import AddPlayerForm from '../components/AddPlayerForm';

class Scoreboard extends Component {

  static propTypes = {
    players: PropTypes.array.isRequired
  };

  render() {
    const { dispatch, players } = this.props;
    const addPlayer = bindActionCreators(PlayerActionCreators.addPlayer, dispatch);
    const removePlayer = bindActionCreators(PlayerActionCreators.removePlayer, dispatch);
    const updatePlayerScore = bindActionCreators(PlayerActionCreators.updatePlayerScore, dispatch);

    const playerComponents = players.map((player, index) => {
      <Player
        index={index}
        name={player.name}
        score={playerscore}
        key={player.name}
        updatePlayerScore={updatePlayerScore}
        removePlayer={removePlayer}
      />
    });

    return (
      <div className="scoreboard">
        <Header players={players} />
        <div className="players">
          { playerComponents }
        </div>
        <AddPlayerForm addPlayer={addPlayer} />
      </div>
    );
  }
}

const mapStateToProps = state => (
  {
    players: state
  }
);

export default connect(mapStateToProps)(Scoreboard);

And here is the error from the console

Uncaught Error: bindActionCreators expected an object or a function, instead received undefined. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?

2 Answers

Jennifer Beck
PLUS
Jennifer Beck
Courses Plus Student 5,969 Points

Hey Edwin,

I had the same error in my console even though I had imported the Action Creators properly.

It looks like line 25 of your code should read

score={player.score}

instead of

score={playerscore}

And then line 21 should be

const playerComponents = players.map((player, index) => (
  <Player...
));

instead of

const playerComponents = players.map((player, index) => {
  <Player...
});

Hopefully that helps!

Justin Rich
Justin Rich
19,556 Points

I'm having trouble with this one too ... any suggestions?

chrome dev tools it says: expected an object or a function, instead received undefined check the definition of your const addPlayer = bind action creator ...

make sure everything is spelled 100% correctly, it expected a object or function but got undefined??!!

UNDEFINED something is not being imported or referenced/spelled correctly :)

Hope that helps hehe

double check the spelling and reference to all the imports between the actions folder file and the scoreboard imports :D

If you have any issues still feel free to message me the Scoreboard js and actions folder

I don't mind helping you debug :DD