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 Creating the Redux Store

David Axelrod
David Axelrod
36,073 Points
Posted by David Axelrod
David Axelrod
36,073 Points

Auto Naming reducers?

When we import our reducer into index.js the name is PlayerReducer but in the file it's defined as Player. Does redux handle auto renaming?

Thanks!

Larisa Popescu
Larisa Popescu
20,242 Points
Larisa Popescu
Larisa Popescu
20,242 Points

I actually have the same question as you, because I get an error saying that "expected the reducer to be a function". Actually I solved it by removing the curly braces from around PlayerReducer reducers/player.js

import * as PlayerActionTypes from '../actiontypes/player';

const initialState = [
    {
        name: 'Jim Hoskins',
        score: 31,
    },
     {
        name: 'Andrew Chalkley',
        score: 20,
    },
    {
        name: 'Alena Holligan',
        score: 50,
    },
];

export default function Player( state = initialState, action ) {
    switch(action.type) {
        case PlayerActionTypes.ADD_PLAYER:
        return [
            ...state,
            {
                name: action.name,
                score: 0
            }
        ];

        case PlayerActionTypes.REMOVE_PLAYER:
        return [
            ...state.slice(0, action.index),
            ...state.slice(action.index + 1)
        ];

        case PlayerActionTypes.UPDATE_PLAYER_SCORE:
        return state.map((player, index) => {
            if(index === action.index) {
                return {
                    ...player,
                    score: player.score + action.score
                };
            }
            return player;
        });

        default: 
            return state;
    }
}

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import PlayerReducer from './src/reducers/player';
import Scoreboard from './src/containers/Scoreboard';   

const store = createStore(
    PlayerReducer
);

render (
    <Provider store={store}>
        <Scoreboard />
    </Provider>,
    document.getElementById('root')
);
David Axelrod
David Axelrod
36,073 Points
David Axelrod
David Axelrod
36,073 Points

Hrm interesting. I've done a bit more work with Redux and it does seem like you can import modules as different names if the file only has one export. Can you post your reducer code? Would love to check it out

1 Answer

codeboost
codeboost
6,886 Points
codeboost
codeboost
6,886 Points

Your Player class is the default export, so you can import it with any name you want. This goes for all the imports not between curly braces. This has nothing to do with Redux, but rather with ES6 exports/imports.