无法让 redux 工具包与异步一起工作（createAsyncThunk）

Question

Whosebug 的朋友们您好。我开始使用 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 不起作用，为什么第二个 createAsyncThunk 起作用。

对我来说，这两个函数看起来有点相同。

这是 RTK 文档中的一个示例（出于某种原因，他们没有在这个示例中介绍错误处理，我没有找到）：

谢谢 (: .

Answer 1

来自documentation：

and a callback function that should return a promise

你的异步 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);
      })
);

无法让 redux 工具包与异步一起工作（createAsyncThunk）

cant get redux toolkit to work with async (createAsyncThunk)

javascript

reactjs

redux

redux-thunk

rtk