Почему combineReducers вызывает ошибку?

Question

Arti-Jack @Arti-Jack

React
Redux

Почему combineReducers вызывает ошибку?

У меня возникла такая трудность, что мне не понятны некоторые моменты в редаксе.

Во-первых. У меня есть два компонента.
Первый:

class App extends React.Component {
  onDoSomeStuff() {
   this.props.onAddTask(this.entryInput.value)
  }
  render() {
    //alert(this.props.entryText)
    return (
      <div>
        <input type='text' ref={ (input) => this.entryInput = input } placeholder='Add your task here...' />
        <Button onClick={this.onDoSomeStuff.bind(this)}>Add</Button>
        <ul>
          {
            /*
            this.props.entryText.map(
              (track, index) => 
               <li key={index}>{track}</li>
            )
            */
            this.props.entryText.map(
              (task, index) =>
                <Content key={index} value={task} />
            )
          }
        </ul>
      </div>
    )
  }
}

export default connect(state => ({entryText: state }), 
  dispatch => ({
    onAddTask: (taskName) => {
      dispatch({ type: 'ADD_TASK', payload: taskName });
    }
  })
)(App)

Второй

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.contentId = parseInt(this.props.children)
  }

  onDoSomeStuff() {
    this.props.onDeleteTask(this.props.key)
    console.log("hmmm", this.props.index)
  }
  render() {
    //alert(this.props.entryText)
    return (
      <div>
         {console.log(this.props.value)}
        <b>{/*this.props.entryText[this.props.index*/this.props.value}</b>
        <button onClick={this.onDoSomeStuff.bind(this)}>Delete</button>
      </div>
    )
  }
}

export default connect(state => ({ }), 
  dispatch => ({
    onDeleteTask: (taskId) => {
      dispatch({ type: 'DELETE_TASK', payload: taskId });
    }
  })
)(Content)

Есть компонент App, он использует li-key, чтобы рендерить списком введенные пользователем сообщения. Используется в li-key другой дочерний компонент - Content. Оба они подключены к хранилищу. И ещё, у меня не выходит комбинировать редьюсеры.

Ну вот, например:

function addTask(state = [], action) {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state,
      action.payload];
      break;
    
    default:
      return state;
  }
}



function deleteTask(state=[], action) {
	switch (action.type) {
		case 'DELETE_TASK':
			return state.filter(word => word !== state[action.id]);
			break;

		default:
			return state;
	}
}

var reducers = combineReducers({addTask, deleteTask})
var store = createStore(reducers)

Но приложение крашится и выдаёт:

TypeError: this.props.entryText.map is not a function
App.render
src/App.js:29
  26 |    <li key={index}>{track}</li>
  27 | )
  28 | */
> 29 | this.props.entryText.map(
  30 |   (task, index) =>
  31 |     <Content key={index} value={task} />
  32 | )

Он почему-то не видит переданный state.

Но если объединить оба редьюсера в один так:

function addTask(state = [], action) {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state,
      action.payload];
      //return state.concat(action.payload)
      break;


      case 'DELETE_TASK':
      return state.filter(word => word !== state[action.payload]);
      break;

    
    default:
      return state;
  }
}

То добавление записей работает, но не удаление. Я не знаю как получить индекс переданного элемента в li-key, значение получаю через this.props.value, ключ так получить не могу.

В общем, не знаю где я тут накосячил, буду очень рад, если подскажите что не так.