Redux выполняет неправильное действие

Question

Я пытаюсь выполнить действие submitRecord, которое отправляет данные на сервер.Предполагается, что при этом он должен активировать SubmitRecordSuccess, чтобы данные были отправлены на сервер, но вместо этого выполняется действие SubmitRecordFail, как если бы приложение не отправило данные на сервер.Тем не менее, когда я проверяю данные онлайн.Что я делаю неправильно, поэтому выполняется неправильное действие?

Это действие:

export const submitRecordSuccess = ( id, recordData ) => {
  return {
    type: actionTypes.SUBMIT_RECORD_SUCCESS,
    recordId: id,
    recordData: recordData
  };
};

export const submitRecordFail = ( error ) => {
  return {
    type: actionTypes.SUBMIT_RECORD_FAIL,
    error: error
  };
};

export const submitRecordStart = () => {
  return {
    type: actionTypes.SUBMIT_RECORD_START
  };
};

export const submitRecord = ( recordData ) =>{
  return dispatch => {
    dispatch(submitRecordStart());
    axios.post( '/medicalRecords.json', recordData ).then( response => {
      dispatch(submitRecordSuccess( response.data, recordData ));
    } ).catch( error => {
      dispatch(submitRecordFail( error ));
    })
  }
}

И эта функция отправляет действие:

const mapDispatchToProps = dispatch => {
  return {
    onSubmitRecord: (recordData) => dispatch(actions.submitRecord(recordData))
  };
};

Наконец, это редуктор:

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SUBMIT_RECORD_START:
    return {
      ...state,
      loading: true
    };

    case actionTypes.SUBMIT_RECORD_SUCCESS:
    const newRecord = {
      ...action.recordData,
      id: action.recordId
    }

    return {
      ...state,
      medicalRecords: state.orders.concat(newRecord),
      loading: false,
    };

    case actionTypes.SUBMIT_RECORD_FAIL:
    return {
      ...state,
      loading: false
    };

    default:
    return state;
  }
};

Я угадаю ошибку в файле .catch() и получаю

Ошибка типа: не удается прочитать свойство concat изне определено в редукторе (recordBuilder.js: 24)

Answer 1

Первоначально ваше состояние инициализируется как:

state = {
    medicalRecords: [],
    loading: false,
}

Вы получаете сообщение об ошибке из-за этой строки.

medicalRecords: state.orders.concat(newRecord),

Вы пытаетесь получить доступ к state.orders, что составляет undefined и, следовательно, к ошибке.

Пожалуйста, добавьте order: [] в initialState или используйте

medicalRecords: state.medicalRecords.concat(newRecord),

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

medicalRecords: [ ...state.medicalRecords, newRecord ],