Reactjs 使用Redux Toolkit分派多个异步操作

我正在使用Expo/React Native构建一个应用程序，并通过Redux工具包使用Redux处理应用程序的存储/状态

我使用这个设置已经有一段时间了，没有什么复杂的地方，因为我的功能很简单（比如用户/auth、购物车、类别和产品缩减器）

但是对于这个应用程序，我需要从一个端点加载多个目录。为了实现这一点，我创建了一个“catalogs”切片，其中包含多个reducer和一个动作，该动作根据目录的名称执行请求并分派reducer

const initialState = {
  catalogOne: [],
  catalogTwo: [],
  catalogThree: [],
  catalogN: []
}

const catalogsSlice = createSlice({
  name: "catalogs",
  initialState,
  reducers: {
    catalogOneRequestSucceeded: (state,action) => {
      state.catalogOne = action.payload
    },
    catalogTwoRequestSucceeded: (state,action) => {
      state.catalogTwo = action.payload
    },
    // ... and so on a reducer for each catalog
  }
});

然后，我有以下操作，用于请求具有目录名称的端点并分派reducer：

export const catalogRequest = (catalogName) => async (dispatch, getState) => {
  const state = getState();

  try {
    const rsp = await axios.get(`https://catalogEndpointBase/${catalogName}`, {
      headers: {
        Authorization: `Bearer ${state.user.accessToken}`,
        "Content-Type": "application/json",
      },
    });

    switch (catalogName) {
      case "catalogOne":
        dispatch(catalogOneRequestSucceeded(rsp.data));
        break;
      case "catalogTwo":
        dispatch(catalogTwoRequestSucceeded(rsp.data));
        break;
      case "catalogThree":
        dispatch(catalogThreeRequestSucceeded(rsp.data));
        break;
    }

    return rsp.data;
  } catch (e) {
    throw e;
  }
};

所以我现在的问题是：如何以“异步/等待”的方式多次分派此操作，以便逐个加载目录？还有：我这样做是正确的还是有更好的方法来处理这种多重请求

我曾想过这样的事情，但我真的不知道如何做到：

  useEffect(() => {
    const loadCatalogsAsync = async() => {
      try {
        await dispatch(catalogRequest("catalogOne"));
        await dispatch(catalogRequest("catalogTwo"));
        await dispatch(catalogRequest("catalogThree"));
        // ... and so on for all my catalogs
      } catch ( e ) {
        console.error(e);
      }
    }

    loadCatalogsAsync();
  }, []);
}

我们的目标是找到一种行为的最佳实践，这种行为要求应用程序在加载应用程序时获取多个数据

---

谢谢。

您不需要等待

调度

。您也不需要

try

/

catch

块，因为thunk将捕获任何API错误并发送“拒绝”操作。您只需

发送
您的三个Thunk

useEffect(() => {
  dispatch(catalogRequest("catalogOne"));
  dispatch(catalogRequest("catalogTwo"));
  dispatch(catalogRequest("catalogThree"));
}, []);


我会把你的恶作剧和减速器写得简单得多。我将使用一种操作类型，并让
catalogName
成为
有效负载的一部分（您也可以从操作的
meta
属性访问它）。您可以删除thunk中的整个
开关
块和相应的大小写减缩器。相反，您可以使用一个case reducer，根据
action.payload.catalogName
更新状态中的正确属性

thunk：

export const catalogRequest = createAsyncThunk(
  "catalogs/request",
  async (catalogName, { getState }) => {
    const state = getState();
    const rsp = await axios.get(`https://catalogEndpointBase/${catalogName}`, {
      headers: {
        Authorization: `Bearer ${state.user.accessToken}`,
        "Content-Type": "application/json"
      }
    });
    return {
      data: rsp.data,
      catalogName
    };
  }
);

切片：

const catalogsSlice = createSlice({
  name: "catalogs",
  initialState,
  reducers: {},
  extraReducers: {
    [catalogRequest.fulfilled]: (state, action) => {
      const { data, catalogName } = action.payload;
      state[catalogName] = data;
    }
  }
});