Reducer - add new element

I have this store:

const initialActors = {
    list: 'Actor\'s lists',
    actors: [
        {
            name: 'Angelina Jole',
            involved: true
        },
        {
            name: 'Bratt Pitt',
            involved: false
        },
    ]
}

I have a reducer to add a new actor to my store:

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                ...state.list,
                actors: [
                    ...state.actors,
                    action.name,
                    action.involved
                ]
            }
        default:
            return state
    }
}

I have a action creator too but it doesn't important. I dispatch that and display my state:

store.dispatch(addNew({name: "Hello", involved: true}) ); // I have this action creator
console.log(store.getState()

console.log displays very difficult object with letters like: {0: "A", 1: "c"}. What is wrong?

@Edit
I tryed change ...state.list to state list like this:

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                state.list,
                actors: [
                    ...state.actors,
                    action.name,
                    action.involved
                ]
            }

        
        default:
            return state
    }
}

but I have this error:

> Parsing error: Unexpected token, expected ","
Similiar situation I have if I tryed modify actors array:

case 'ADD_NEW':
    return {
        ...state.list,
        actors: [
            ...state.actors,
            {
                action.name,
                action.involved
            }
            
        ]
    }

Error message is this same but point at action object (action.name).

In your reducer, you are mistakenly spreading state.list. Since it is a string, you are getting all the letters. You should spread the state there. Because, you want to keep your state, other than actors array. This is why you spread the whole state and keep the list (with others if there would be).

Also, you are adding your item wrong, it should be an object.

const actors = (state = initialActors, action) => {
  const { name, involved } = action;

  switch (action.type) {
    case "ADD_NEW":
      return {
        ...state,
        actors: [
          ...state.actors,
          {
            name,
            involved
          }
        ]
      };
    default:
      return state;
  }
};

Just a small mistake what you did, you need to add as an object with 2 properties like [...state.actors, { action.name, action.involved }] instead of what you did.

From Spread syntax's documentation:

> Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Like this:

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                ...state,
                actors: [
                    ...state.actors,
                    {  
                       name: action.name,
                       involved: action.involved
                    }
                ]
            }
        default:
            return state
    }
}

Consider the following:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var array = [
  {  
    name: 'someone',
    involved: false,
  }
];

console.log([...array, { name: 'hello', involved: true }]);

<!-- end snippet -->

I hope this helps!

state.list is a string, and you are trying to spread it

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let a = 'name'
let c = {...a}
console.log(c)

<!-- end snippet -->

run the above code snippet so you will be able to understand it

and for adding new object you need to update the reducer as follows

                ...state,
                actors: [
                    ...state.actors,
                    {  
                       name: action.name,
                       involved: action.involved
                    }
                ]

so the above code will spread all the existing properties in the state and then you spread all the current actors and add a new object as shown above

Update

Since you are passing as

store.dispatch(addNew({name: "Hello", involved: true}) );

here the payload is an object so you can directly use that one

so in action it will be object which has two props one is

• type

• the payload you have send it

                   ...state,
                   actors: [
                       ...state.actors,
                       action.payload
                   ]
  

Sample Working codesandbox