Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Building Applications with React and Redux Putting it all Together Creating the Redux Store

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

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

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

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.