Почему не происходит добавление в массив?

Question

[Никита]

Подскажите, пожалуйста, почему не происходит добавление в массив?
Обработка state происходит в рерюсере:

export function AddTodoReducer(state = initialState, action) {
  switch (action.type) {

    case ADD_TODO:
      let newTodo = {
        id: action.id,
        text: action.text,
        completed: false
      }
      let newState = {...state}
<b>      newState.todos = [...state.todos]</b> // Проблема в этой строке
      newState.todos.push(newTodo)
      return newState

    default:
      return state
  }
}

Проблема в этой строке newState.todos = [...state.todos] когда я ее убираю добавление происходит, но ведь так неправильно, по правилу иммутабельности.

Дополнительные файлы:
В AddTodo.js происходит вызов addTodoAction(input.value)

import React from 'react'
/* import Input from '../../UI/Input/Input' */
import Button from '../../UI/Button/Button'
import classes from './AddTodo.module.css'

const AddTodo = ({ addTodoAction }) => {

  let input
    const submitHandler = event => {
    event.preventDefault()
    if (!input.value.trim()) {
      return false
    }
    addTodoAction(input.value)
    input.value = ''
  }

  return (
    <form onSubmit={submitHandler} className={classes.AddTodo}>
      <input ref={node => { input = node }} />
      <Button>Добавить</Button>
    </form>
  )
}

export default AddTodo

Который берется из TodoListContainer.js

import { connect } from 'react-redux'
import AddTodo from '../components/AddTodo/AddTodo'
import {addTodo} from '../store/actions/index'

const mapStateToProps = state => {
  return {
    
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addTodoAction: text => dispatch(addTodo(text))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(AddTodo)

Answer 1

[Антон Спирин]

Не может не добавляться.
Демо.