slice 中关于 createAsyncThunk 命名问题

Question

老师好，
再 searchProduct 的 slice 中，有这段代码：

export const searchProduct = createAsyncThunk(
	"productSearch/searchProduct", // 问题在这里
	...
)

我理解的是：
productSearch 是命名空间，我理解是可以自定义的，规范化下保持和文件名一致。

但是，productSearch/searchProduct 中的 searchProduct 是 action 名称的话，需要必须和 export const searchProduct 中声明的searchProduct名称保持一致吗？

Answer 1

阿莱克斯刘 2024-09-24 15:30:10

不需要保持一致。createAsyncThunk 的第一个参数 "productSearch/searchProduct" 是 action 的类型字符串，用于标识这个异步操作。这个字符串可以是任何你想要的名称，只要它在你的应用中是唯一的即可。

export const searchProduct 是你定义的 thunk 函数的名称，用于在代码中引用这个异步操作。虽然通常会让这两个名称保持一致以便于理解和维护，但它们并不需要严格一致。

例如，你可以这样定义：

export const searchProductThunk = createAsyncThunk(
  "productSearch/searchProduct",
  async (searchTerm) => {
    const response = await axios.get(`/api/products?search=${searchTerm}`);
    return response.data;
  }
);

在这个例子中，searchProductThunk 是你在代码中引用的名称，而 "productSearch/searchProduct" 是这个 thunk 的 action 类型字符串。