React-redux не связывает eventActions и eventReducer

Question

Я не уверен, что делать? Я продолжаю получать эту ошибку. Когда я использую действие. Я предполагаю, что мои eventActions.js не отображаются на eventReducer.js!

TypeError: Cannot read property 'id' of undefined
(anonymous function)
E:/reduxbootcamp/revents/src/features/event/eventReducer.js:67
  64 | };
  65 | 
  66 | const deleteEvent = (state, payload) => {
> 67 |   return [...state.filter(event => event.id !== payload.event.id)];
  68 | };
  69 | 
  70 | export default createReducer(initialState, {
View compiled
deleteEvent
E:/reduxbootcamp/revents/src/features/event/eventReducer.js:67
  64 | };
  65 | 
  66 | const deleteEvent = (state, payload) => {
> 67 |   return [...state.filter(event => event.id !== payload.event.id)];
  68 | };
  69 | 
  70 | export default createReducer(initialState, {
View compiled
(anonymous function)
E:/reduxbootcamp/revents/src/app/common/util/reducerUtils.js:5
  2 |     return (state = initialState, {type, payload}) => {
  3 |         const handler = fnMap[type];
  4 | 
> 5 |         return handler ? handler(state, payload) : state
  6 |     }
  7 | }
View compiled
▶ 7 stack frames were collapsed.
EventDashboard.handleDeleteEvent
E:/reduxbootcamp/revents/src/features/event/EventDashboard/EventDashboard.jsx:77
  74 |  };
  75 | 
  76 |  handleDeleteEvent = id => {
> 77 |    this.props.deleteEvent(id);
     | ^  78 |  };
  79 | 
  80 |  render() {
View compiled
onClick
E:/reduxbootcamp/revents/src/features/event/EventList/EventListItem.jsx:45
  42 | <Segment clearing>
  43 |   <span>{event.description}</span>
  44 |   <Button
> 45 |     onClick={() => deleteEvent(event.id)}
     | ^  46 |     as="a"
  47 |     color="red"
  48 |     floated="right"

Вот мой Github репо

Пока я искал документацию и просмотрел код на наличие ошибок. Ниже приведен код, который я считаю ответственным. Обратите внимание, что я установил 5.1.1 react-redux поверх более новой версии 7+.

const createEvent = (state, payload) => {
  return [...state, payload.event];
};

const updateEvent = (state, payload) => {
  return [
    ...state.filter(event => event.id !== payload.event.id),
    payload.event
  ];
};

const deleteEvent = (state, payload) => {
  return [...state.filter(event => event.id !== payload.event.id)];
};

Ожидается, что действие будет работать только после того, как все будет подключено к информационной панели событий.

Answer 1

Ваша фактическая ошибка TypeError: Cannot read property 'id' of undefined, и, взглянув на ваш инкриминированный код:

const deleteEvent = (state, payload) => {
  return [...state.filter(event => event.id !== payload.event.id)];
};

... мы видим, что только в 2 местах доступно свойство с именем id:

1. как event.id
2. и как payload.event.id

Так что либо event не определено, либо payload.event является.

Первый сценарий может произойти, если у вас есть неопределенные значения в state (который мы можем считать массивом).Второй обычно происходит из-за неправильного использования создателей действий.

Глядя на трассировку стека, мы видим следующее:

handleDeleteEvent = id => {
  this.props.deleteEvent(id);
};

Это означает, что единственное, что вы передаете создателю действияэто сам id.

Вы не поделились реализацией createReducer, но мы можем сделать вывод, что это своего рода вспомогательный помощник.Обычно единственным аргументом создателей действий, выставляемых такими помощниками, является непосредственно payload.

Итак, может ли быть правильная реализация вашего редуктора следующим образом?

const deleteEvent = (state, payload) => {
  return [...state.filter(event => event.id !== payload)];
};