React / JS - Создание условного ответа сервера на вызов действия

Question

У меня есть модал для добавления элемента todo, который сбрасывается после отправки, но также сбрасывается при сбое отправки. Как сделать так, чтобы мой модал оставался открытым и пользователь мог видеть ошибки, которые они сделали?

//modal component
onSubmit = e => {
  e.preventDefault();

  const newTask = {
    task: this.state.task
  };
  this.props.addTask(newTask)

  // sudo code below
  if(this.props.addTask(newTask === 200 status success or something){
    this.setState({task: "" })
  //Close modal
    this.toggle();
   }
}

 // action file
export const addTask = (task) => dispatch =>{
  axios.post('/api/users/newtask', task )
      .then(res => 
          dispatch({
              type: ADD_TASK,
              payload: res.data
          })
  ).catch(err =>
      dispatch({
          type: GET_ERRORS,
          payload: err.response.data
      })
  );
}

Не уверен, поможет ли это, но я использую axios для вызовов API

Answer 1

У вас есть 2 способа сделать это:

1. Обратный вызов, который вы можете передать в свое действие отправки:

//modal component
onSubmit = e => {
  e.preventDefault();

  const newTask = {
    task: this.state.task
  };
  this.props.addTask(newTask, () => {
    this.setState({task: "" })
    //Close modal
    this.toggle();
  });
}

 // action file
export const addTask = (task, successCallback) => dispatch =>{
  axios.post('/api/users/newtask', task )
      .then(res => {
          dispatch({
              type: ADD_TASK,
              payload: res.data
          });
          if (typeof successCallback === 'function') {
             successCallback(res.data);
          }
        )
  ).catch(err =>
      dispatch({
          type: GET_ERRORS,
          payload: err.response.data
      })
  );
}

В идеале вы должны делать это через ваши редукционные действия / редукторы:

//modal component (Or don't render the modal at all at the parent component)
...
render() {
  if (!this.props.showModal) {
    return null;
  }
}

// Action:    
dispatch({
    type: ADD_TASK,
    payload: res.data
});

//Reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TASK:
      return Object.assign({}, state, {
        tasks: [...state.tasks, action.task],
        showModal: false, // <== Set show modal to false when the task is done.
      })
    default:
      return state
  }
}