reactjs - 如何将来自 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
      }
    )
  },
})