Состояние не обновляется в действии при получении обещания от запроса axios - PullRequest
Новая
       19

Состояние не обновляется в действии при получении обещания от запроса axios

0 голосов
/ 25 июня 2019

Я новичок в React и работаю над проектом, в котором я хотел бы обновить свое состояние редукции при каждом успешном добавлении нового объекта. У меня настроен API, и я могу успешно выполнять запросы через почтальона, но при запуске на клиенте обещание не возвращается вовремя из запроса axios или данные недоступны. Я озадачен. Я был бы признателен за любую помощь, будь осторожен со мной, я новенький, лол.

Я прошел через отладчик, и все необходимые мне данные возвращаются через response.data, но всякий раз, когда я присваиваю его состоянию, которое будет обновляться, оно не обновляется. Если я перемещу возврат за пределы .then, то я могу вернуть объект, но он не содержит ответа ... что важно. 

/* This is my reducer that is calling axios request from a JSService. Axios 
request is working and returning appropriate res.data. The newObject 
attribute is not being applied to state when mapping state to props. */


// Not working
case
ADD_OBJECT: 
  objectService.saveObject(action.payload.object)
    .then((res) => {
      return {
        ...state,
        newObject: res.data,
      }
    }.catch((error) => {
      console.log(error);
    }

return { ...state };


// Action
export const addObject = object => ({
  type: ADD_OBJECT,
  payload: { object },
});

// Axios Request
export const addObject = object => axios.post('/api/ObjectData/add', object);

// Component
class AddNew extends Component {
 state = { title: '', roleId: '' };
 onSubmit = (e) => {
   e.preventDefault();
   const newEntry = this.state;
   const { setObject, history } = this.props;
   setObject(newEntry);
   history.push('/objects/nextPage');
 }

 onChange = (e) => {
   this.setState({[e.target.name]: e.target.value});
 }

 render() {
   const { title, roleId } = this.state;
   return(
    <div>
      <form onSubmit={this.onSubmit}>
        <div className="form-group">
          <label htmlFor="title">Title</label>
          <input type="text" className="form-control" name="title" onChange={this.onChange} value={title} />
        <div>
        <input type="submit" value="Submit" className="btn btn-primary btn-block" />
      </form>
    </div>
   );
 }
}
function mapStateToProps({ data }){
  return { data };
}

function mapDispatchToProps(dispatch) {
  return ({
    setObject: (object) => { dispatch(addObject(object)); },
  )};
}

Ожидаемые результаты: newObject будет содержать res.data в моем редукторе.

1 Ответ

0 голосов
/ 25 июня 2019

Из документов Redux:

Единственный способ изменить состояние - это создать действие, объект, описывающий произошедшее. Не помещать вызовы API в редукторы .Редукторы - это просто чистые функции, которые принимают предыдущее состояние и действие и возвращают следующее состояние.Не забудьте возвращать новые объекты состояния, вместо того, чтобы изменять его предыдущее состояние.

Ref: https://redux.js.org/advanced/async-actions

...