未调度Redux操作。 TypeError：散布不可迭代实例的无效尝试

Question

在我的应用程序中，我想向“事件”对象中的数组添加“票证”。在操作中，我将新票证发布到数据库中，然后将操作分派给reducer。通过使用Redux记录器，我能够检索错误：

'createTicket'的操作是这样的：

// actions/tickets.js

export const TICKET_CREATE_SUCCESS = 'TICKET_CREATE_SUCCESS';

const ticketCreateSuccess = tickets => ({
  type: TICKET_CREATE_SUCCESS,
  tickets
});

export const createTicket = (eventId, data) => (dispatch, getState) => {
  const jwt = getState().currentUser.token;
  const id = getState().currentUser.userId;
  const email = getState().currentUser.email;
  const name = getState().currentUser.name;

  request
    .post(`${baseUrl}/events/${eventId}/tickets`)
    .set('Authorization', `Bearer ${jwt}`)
    .send(data)
    .then(response => {
      dispatch(ticketCreateSuccess({ ...response.body, user: { id, email, name } }));
    })
    .catch(error => error);
};

减速器

// reducers/events.js    

import { EVENT_FETCHED } from '../actions/events';
import { TICKET_EDIT_SUCCESS, TICKET_CREATE_SUCCESS } from '../actions/tickets';

export default (state = null, action = {}) => {
  switch (action.type) {
    case EVENT_FETCHED:
      return action.event;
    case TICKET_EDIT_SUCCESS:
      return {
        ...state,
        tickets: state.tickets.map(ticket => {
          if (ticket.id === action.ticket.id) {
            return action.ticket;
          }
          return ticket;
        })
      };
    case TICKET_CREATE_SUCCESS:
      console.log({ ...state, tickets: [...state.tickets, action.tickets] });
      return { ...state, tickets: [...state.tickets, action.tickets] };
    default:
      return state;
  }
};

减速器组合为：

import { combineReducers } from 'redux';

import currentUser from './currentUser';
import events from './events';
import event from './event';
import ticket from './ticket';
import tickets from './tickets';
import numberOfTickets from './numberOfTickets';

export default combineReducers({ currentUser, events, event, ticket, tickets, numberOfTickets });

Answer 1

当它的值为null时，是否正在尝试扩展化简器状态：

export default (state = null, action = {}) => {

return {
  ...state, // Here
  // rest
}

您的默认状态可能应该是一个对象，例如：

const InitialState = {
  tickets: []
};

export default (state = InitialState, action) => {
  // Some code
  case TICKET_CREATE_SUCCESS:
    return {
      ...state,
      tickets: [
        ...state.tickets,
        action.tickets
      ]
    }
}

Answer 2

只需添加此...状态|| [] 而且你很好。 问题是... state的值等于空数组的null，当您尝试遍历null时会产生错误。 因此使用“ OR”运算符，它将正常工作。