2

你好 stackOverflow 的朋友们。我开始使用 redux 工具包，有些东西我没有得到。

我有这个切片：

const envSlice = createSlice({
  name: "env",
  initialState: { envs: [], loading: false, error: false },
  reducers: {},
  extraReducers: {
    [fetchEnv.pending]: (state) => {
      state.loading = true;
    },
    [fetchEnv.fulfilled]: (state, action) => {
      state.envs = action.payload;
      state.loading = false;
    },
    [fetchEnv.rejected]: (state) => {
      state.loading = false;
      state.error = true;
    },
  },
});

export default envSlice.reducer;

我正在尝试从 mongo 服务器获取一些数据。此代码用于在常规 redux 中工作：

--- fetching all the envs ---

export const fetchEnv = createAsyncThunk("admin/fetchEnv", (thunkAPI) => {
  axios
    .get("http://10.0.0.6:5000/admin/getAllEnv")
    .then((response) => response.data)
    .catch((error) => {
      console.log(error);
      return thunkAPI.RejectWithValue(error);
    });
});

但由于某种原因，它总是陷入困境并拒绝——即使这是一个回应。

此代码有效：

export const fetchEnv = createAsyncThunk(
  "admin/fetchEnv",
  async (_, thunkAPI) => {
    try {
      const response = await axios.get("http://10.0.0.6:5000/admin/getAllEnv");
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue({ error: error.message });
    }
  }
);

我的问题是我完成了这项工作，但我不明白为什么第一个 createAsyncThunk 不起作用，以及为什么第二个起作用。

对我来说，这两个功能看起来都差不多。

这是来自 RTK 文档的示例（由于某种原因，他们在此示例中没有涵盖错误处理，我没有找到）：

Rtk 文档示例

谢谢 （： 。

4

1 回答 1

3

从文档中：

和一个应该返回一个承诺的回调函数

您不起作用的异步 thunk 不会返回任何内容：

export const fetchEnv = createAsyncThunk("admin/fetchEnv", (thunkAPI) => {
  return axios //<----return a promise
    .get("http://10.0.0.6:5000/admin/getAllEnv")
    .then((response) => response.data)
    .catch((error) => {
      console.log(error);
      return thunkAPI.RejectWithValue(error);
    });
});

或者你可以有一个无实体的箭头函数：

export const fetchEnv = createAsyncThunk(
  'admin/fetchEnv',
  (
    thunkAPI 
  ) => //no { or }
    axios
      .get('http://10.0.0.6:5000/admin/getAllEnv')
      .then((response) => response.data)
      .catch((error) => {
        console.log(error);
        return thunkAPI.RejectWithValue(error);
      })
);
于 2021-06-07T09:23:23.700 回答