Question

在我的React / Redux应用程序中，我有自定义group个对象。我希望有一个页面显示所有组的摘要列表以及当前所选组的详细视图（默认为列表中的第一个组）。我需要从我的其他api请求一个组列表（/groups），获取第一组的id（从商店？）并将其设置为selected group然后发出get请求以返回所选组的成员列表（/groups/${id}/members）

我是React / Redux的新手，我不知道如何编写这个。我应该将其写为3个单独的操作，是否可以使用上一个操作的结果使反应组件调用这些操作？或者我应该使用thunk中间件将这个逻辑放在一个组合的动作处理程序中？在这种情况下，我该如何编写这样的动作处理程序？

Answer 1

最好编写3个动作，然后使用thunk将它们链接在一起。此外，任何请求都是异步的，因此他们无论如何都需要使用thunk或其他异步方法。因此，对/groups和/groups/${id}/members的请求将是类似于此的thunk（箭头函数仅为了简洁）：

export const requestGroups = () => (
  (dispatch) => {
    // Maybe dispatch an action here that says groups are loading,
    // for showing a loading icon or something
    return fetch('/groups').then((response) => (
      dispatch(updateGroups(response))
      // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response })
    )
  }
)

其中updateGroups是将响应数据发送到reducer以将其置于状态的操作。并确保这些thunk返回promises，以便您以后可以将它们链接在一起。你可能也想在这里做一些错误处理。

然后，一旦你完成了这三个动作，你就可以制作一个将它们全部组合在一起的thunk：

export const initializeGroups = () => (
  (dispatch, getState) => (
    dispatch(loadGroups()).then(() => {
      const { groups } = getState(); // Or wherever the list is
      setSelectedGroup(groups[0]);
      return getGroupData(groups[0]);
    }).then(() => {
      // Dispatch an action saying everything is done, or do any other stuff here.
    }).catch((error) => {
      // Do any error handling
    });
  )
 )

使用Redux和React按顺序执行异步操作

1 个答案: