CODEWITHSUNDEEP
reactjsredux
Mario Gomez
Mario Gomez

Reputation: 73

Already Answered Uncaught TypeError: state.concat is not a function error

I am following a tutorial for React and redux but at the end of the video I get an error even due I have the same code.

Uncaught TypeError: state.concat is not a function

Any help will be appreciate it!

//action is a parameter and the reducer is the function
//We will make change to the state based on the action (function)

//Function will be reducers
const cards = (state, action) => {
    switch (action.type){
        case 'ADD_CARD':
            let newCard = Object.assign({}, action.data, {
                score: 1,
                id: +new Date
            });
//error is here
            return state.concat([newCard]);
        default:
            return state || {};
    }


};

//Redux helper function to pass reducer functions
const store = Redux.createStore(Redux.combineReducers({
    cards: cards
}));

//Keep an eye on the store for changes
store.subscribe(() => {
    console.log(store.getState());
});

//activate store action
store.dispatch({
    type: 'ADD_CARD',
    data: {
        front: 'front',
        back: 'back'
    }
});

//Another action
store.dispatch({
    type: 'ADD_CARD',
    data: {}
});

Upvotes: 4

Views: 7099

Answers (4)

Troy Crowe
Troy Crowe

Reputation: 123

State.Cards.Concat(newCard); Your array is Cards not state.

Upvotes: 0

sina
sina

Reputation: 1

try this code 

const cards = (state = [], action) => {
    switch (action.type){
        case 'ADD_CARD':
            let newCard = Object.assign({}, action.data, {
                score: 1,
                id: +new Date
            });
            //error is here
            return state.concat(newCard);
        default:
            return state || {};
    }
};

Upvotes: 0

Mario Gomez
Mario Gomez

Reputation: 73

I was returning an object { } instead of an array [ ] at the default level in cards.

//action is a parameter and the reducer is the function
//We will make change to the state based on the action (function)

//Function will be reducers
const cards = (state, action) => {
    switch (action.type){
        case 'ADD_CARD':
            let newCard = Object.assign({}, action.data, {
                score: 1,
                id: +new Date
            });
        //splitting the state object into individual properties
            return state.concat([newCard]);
        default:
            return state || [];
    }


};

//Redux helper function to pass reducer functions
const store = Redux.createStore(Redux.combineReducers({
    cards: cards
}));

//Keep an eye on the store for changes
store.subscribe(() => {
    console.log(store.getState());
});

//activate store action
store.dispatch({
    type: 'ADD_CARD',
    data: {
        front: 'front',
        back: 'back'
    }
});
I wasn't reutning an array at the default in cards instead I had {}. I guest I was returning an object ?


//Another action
store.dispatch({
    type: 'ADD_CARD',
    data: {}
});

Upvotes: 0

stevenlacerda
stevenlacerda

Reputation: 1187

State should be an object, not an array, so .concat will not work on it. You will have to do something like state.cards.concat(foobar). Correct me if I'm wrong here, but take a look at state and verify its type.

Upvotes: 2

Related Questions