Question

我刚刚集成到 redux-toolkit 。我的目标是将查询 getPosts 的结果存储在 slice 中，以便我可以在整个站点中使用它或对其进行更改。

我的createApi是这样的：

  export const postsApi = createApi({
  reducerPath: "posts",
  baseQuery: getGeneralFetchBaseQuery(),
  endpoints: (builder) => ({
    getPosts: builder.query<PostsType, number>({
      query: (id) => `api/posts/${id}`,
    }),
  }),
});

export const { useGetPosts } = postsApi;

我想将 getPosts 的结果存储在这个切片中

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
});

export default postsSlice.reducer;

我的店就是这样

export const mainStore = configureStore({
  reducer: {
    postsReducer,
    [postsApi.reducerPath]: postsApi.reducer,
  },
})

如何实现？

Answer 1

让我先介绍一下：一般来说，您可能不应该这样做。

RTK-Query 是一个完整的缓存解决方案 - 因此在大多数解决方案中您通常不应该从中复制状态，而是让 RTK-Query 控制该数据。
如果你想改变它，暂时将它复制到本地组件状态（顺便说一下，这适用于所有类型的表单状态，你不应该在 redux 中就地编辑表单，而是将它临时移动到本地组件状态），使用突变将其保存回服务器，然后让 RTKQ 重新获取该数据以更新缓存。无论您在何处需要该数据，只需调用 useGetPostsQuery() 就可以了 - 如果尚未获取该数据，则将获取该数据，否则您将仅从缓存中获取值。

哦，奖金：你不应该为每个资源创建一个额外的 api。在几乎所有情况下，您的应用程序中都应该只有一个 createApi 调用 - 您仍然可以使用 Code Splitting 将其拆分为多个文件。

综上所述，当然，如果您有很好的用例，您可以将该数据复制到切片中 - 但请注意，通过这种方式，您现在负责保留该数据- 最新并在您不再需要时清理它。通常，RTKQ 会为您做这些。

以下示例说明如何将查询中的数据克隆到切片中，取自 RTKQ examples page：

const slice = createSlice({
  name: 'auth',
  initialState: { user: null, token: null } as AuthState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        state.token = payload.token
        state.user = payload.user
      }
    )
  },
})

如何将来自 createApi 的查询结果存储在切片中？

1 个答案: