Question

对于我的React组件，我使用Redux（react-redux）和Redux Thunk来维护应用程序状态。

有一个ShowGroup组件从后端检索group。如果该组不存在（或在任何其他错误情况下），则调用错误回调以更新状态。

class ShowGroup extends Component {
  constructor(props) {
    super(props);
    this.groupId = this.props.match.params.id;
    this.state = {
      'loaded': false,
      'error': null
    };
  }

  _fetchGroupErrorCallback = response => {
    this.setState({loaded: true, error: response});
  }

  componentDidMount() {
    this.props.fetchGroup(this.groupId, this._fetchGroupErrorCallback);
  }

  render() {
    //what is the best practice here ?
    let group = this.props.groups[this.groupId];
    if (!group) {
      if (!this.state.loaded) {
        return <div>Loading group ....</div>;
      }
      if (this.state.error) {
        return <div>{this.state.error.data.message}</div>;
      }
    }
    return (
      <div className="show-group">
        <form>
          {_.map(FIELDS, renderField.bind(this))}
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { groups: state.groups };
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchGroup: (id, callback) => dispatch(fetchGroup(id, callback)),
        updateGroup: (id) => dispatch(updateGroup(id))
    };
};

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

（它是redux-form组件并不重要）

export function fetchGroup(id, fetchErrorCallback) {
  return (dispatch) => {
    axios.get(URL, AUTHORIZATION_HEADER)
      .then(response => {
        dispatch(groupFetched(response))
      })
      .catch(({response}) => {
        fetchErrorCallback(response);
        dispatch(groupFetchErrored(response));
      })
  };
}

groupFetchedErrored动作创建者：

export function groupFetchErrored(response) {
  //handle the error here
  return {
     type: FETCH_GROUP_ERROR,
     response
  }
}

还原剂：

export default function(state=INITIAL_STATE, action) {
  switch(action.type) {
    //....
    case FETCH_GROUP_ERROR:
      return _.omit(state, action.response.data.id);
    default:
      return state;
  }
}

问题：

A. 如果出现错误响应，组件会呈现三次： 1.第一次加载（在ajax调用之后） 2.调用_fetchGroupErrorCallback并设置状态，这将导致渲染 3.调度groupFetchErrored，导致另一个渲染

B。如果成功响应，组件会被渲染两次，但状态不正确，因为没有更新它（我不认为它是正确的为它添加一个回调）

在React中使用Redux和Redux-Thunk时，处理ajax错误响应的最佳做法是什么？动作创建者和减速器应该如何通知组件有什么问题？

更新1

这是我的根减速器：

const rootReducer = combineReducers({
  form: formReducer,
  groups: groupReducer
});

export default rootReducer;

如您所见，我有groups这是形式的对象：

{
   groupId1: groupData1,
   groupId2, groupData2, 
   ....
}

所以，另一个问题是，我应该如何指定一个组正在加载（isLoading级别我不能errorFetching或groups，而且它似乎没有最好为用户可能尝试的每个无效组ID添加一个条目。或者可能有一种方法将无效的组ID放入地图然后清理它？我不知道应该在哪里但是会发生。

Answer 1

将与获取相关的所有状态数据放入Redux存储中。然后商店成为你唯一的真相来源。

然后，您可以完全省略fetchErrorCallback。

您的减速机中已有一个地方可以收到错误通知：

case FETCH_GROUP_ERROR:
  return _.omit(state, action.response.data.id);

您可以将错误存储在redux状态：

case FETCH_GROUP_ERROR:
  const stateWithoutId = _.omit(state, action.response.data.id);
  return {
    ...stateWithoutId,
    errorFetching: action.response.error,
    isLoading: false
  }

然后通过errorFetching将isLoading和mapStateToProps传递到您的组件，就像您已使用groups一样。

另外，要正确跟踪isLoading，最好在开始提取时（在调用axios.get之前）调度另一个操作，也许FETCH_GROUP_STARTED。然后在您的reducer中，在调度该操作类型时将isLoading设置为true。

case GROUP_FETCHED: 
  return { 
    ...state, 
    isLoading: false,
    group: action.response.data // or however you're doing this now.

  };
case FETCH_GROUP_STARTED:
  return { ...state, isLoading: true }; // or maybe isFetchingGroups is a better name

如果这是我的代码，我会进行另一项更改：我不会将response传递给动作创建者，而是仅删除相关数据并传递他们。因此，reducer不需要知道如何处理response对象;它只是接收正确显示组件所需的数据。这样，处理axios调用并且必须知道它们返回的对象的形状的所有代码都在一个地方 - 动作函数。类似的东西：

行动创作者

export function groupFetchErrored(errorWithId) {
  return {
     type: FETCH_GROUP_ERROR,
     payload: errorWithId
  }
}

export function groupFetchSucceeded(groupData) 
  return {
     type: GROUP_FETCHED,
     payload: groupData
  }
}

动作

export function fetchGroup(id, fetchErrorCallback) {
  return (dispatch) => {
    axios.get(URL, AUTHORIZATION_HEADER)
      .then(response => {
        dispatch(groupFetched(response.data)) // or whatever chunk you need out of response
      })
      .catch(({response}) => {
        dispatch(groupFetchErrored({
            error: response.error, 
            id: response.data.id
          }
        );
      })
  };
}

减速

您可能已经注意到我在上面的动作创建者中使用了action.payload。

通常的做法是始终对调度的操作使用相同的数据属性名称（例如，在整个应用程序中的每个reducer和每个操作创建者中始终使用相同的名称）。这样你的减速器就不需要与动作创造者紧密耦合;它知道数据总是在payload字段中。（也许这就是你用response做的事情，但似乎它的目的是专门用于http响应。）

case GROUP_FETCHED: 
  return { 
    ...state, 
    isLoading: false,
    group: action.payload
  };
case FETCH_GROUP_STARTED:
  return { ...state, isLoading: true }; // no payload needed
case FETCH_GROUP_ERROR:
  const dataId = action.payload.id;
  const stateWithoutId = _.omit(state, dataId);
  return {
    ...stateWithoutId,
    errorFetching: action.payload.error,
    isLoading: false
  }

在React

1 个答案:

行动创作者

动作

减速