Question

我有一个react redux应用程序。 app状态结构如下所示：

{
   groups: {gid1: group1, gid2: group2, ....},
   expenses: {eid1: expense1, eid2: expense2, ...}, 
   //.... the rest
}

我的组件对后端进行ajax调用（在动作创建者中完成），并由reducer处理响应以更新状态，然后将其传递给组件。

例如，为了创建一个组，我有以下几段代码：

export function createGroup(values, callback) {
  return (dispatch) => {
    axios.post(GROUP_ENDPOINT,
      {
        name: values.name,
        description: values.description
      }, AUTHORIZATION_HEADER)
      .then((response) => {
        dispatch(groupCreated(response.data));
      });
    };
}

动作创作者：

export function groupCreated(group) {
  return {
    type: CREATE_GROUP,
    payload: group
  }
}

reducer：

export default function(state=INITIAL_STATE, action) {
  switch(action.type) {
    case CREATE_GROUP:
      return { ...state, [action.payload.id]: action.payload};
    default: 
      return state;
  }
}

组件：

class NewGroup extends Component {

  _onSubmit(values) {
    const { history } = this.props;
    this.props.createGroup(values, ({status}) => history.push('/group'));
  }

  _onCancel() {
    const { history } = this.props;
    history.push('/group');
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
          {_.map(FIELDS, renderField.bind(this))}
          <button type="submit" className="btn btn-primary">Create</button>
          <button type="button" className="btn btn-primary" onClick={this._onCancel.bind(this)}>Cancel</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  validate,
  //a unique id for this form
  form:'NewGroup',
  fields: _.keys(FIELDS),
  fields_def: FIELDS
})(
  connect(null, { createGroup })(NewGroup)
);

（这是一个redux-form的事实现在不是我关注的问题。我的问题一般是关于在使用react和redux时处理这种情况）

如果后端的答案成功响应，这一切都很顺利。

我想知道我应该如何处理来自后端的不同响应，例如，如果响应不是200，那么我应用程序状态如何通知组件有什么问题？我是否应该将响应状态纳入我的应用状态？

Answer 1

redux-form我不会这样做。 Redux-form允许您从onSubmit函数返回Promise。如果此承诺拒绝使用SubmissionError，则可以相应地处理表单呈现。 Redux-form会将submitting道具设置为true，而承诺未得到解决或拒绝。您只需要注意从actioncreator返回一个promise（这可以使用redux-middleware完成）。

区分app状态和请求返回的状态代码

1 个答案: