Question

我是React的新手，正在从事一个项目，无论何时成功添加新对象，我都希望更新自己的redux状态。我有我的API设置，可以通过邮递员成功地发出请求，但是无论何时在客户端上运行，似乎axios请求没有及时返回承诺或数据不可用。我很困惑。我将不胜感激，请放心，我是新来的。

我已逐步调试程序，并通过response.data返回了我需要的所有数据，但是每当我将其分配给要更新的状态时，它就不会更新。如果我将return移到.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将在我的reducer中包含res.data。

Answer 1

来自Redux文档：

改变状态的唯一方法是发出一个动作，一个对象描述发生了什么。 请勿将API调用放入减速器中。减速器只是具有先前状态和动作的纯函数，并返回下一个状态。记住要返回新的状态对象，而不是改变先前的状态。

参考：https://redux.js.org/advanced/async-actions

接收来自axios请求的承诺时状态未更新

1 个答案: