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

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 的查询结果存储在切片中？

How to store the result of query from createApi in a slice?

reactjs

react-redux

redux-toolkit