如何在Redux Toolkit切片的reducer内部发出RTK查询GET请求?

juud5qan  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(178)

当我使用RTK Query时,我在理解如何处理HTTP请求等副作用方面有一些困难。从我阅读文档所了解的情况来看,如果我使用RTK Query,我就不必使用Redux Thunk,这将简化很多事情。
目前我有一个简单的postsSlice,它有一个getPosts reducer。我想在这个reducer中发出一个GET请求,以获取所有的帖子,然后将状态设置为响应。我知道如果我没有使用RTK Query,我需要在这里创建一个Redux Thunk操作。我可以使用RTK Query提供的useGetPostsQuery钩子在React组件中轻松地发出请求。但是考虑到它不是一个React组件或钩子,我该如何从Redux内部发出GET请求呢?

export const postsSlice = createSlice({
    name: 'posts',
    initialState,
    reducers: {
        getPosts: (state) => {
            // I want to make a GET request to /getPosts here
        },
    },
});

我有以下apiSlice:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getPosts: builder.query({
            query: () => '/posts',
        }),
    }),
});

export const { useGetPostsQuery } = apiSlice;
jtjikinw

jtjikinw1#

首先:你永远不允许在Redux reducer中加入任何副作用。Redux reducer需要是纯的(无副作用)和同步的。这也不允许使用thunk。
但是,您还遗漏了其他几点:RTK Query已经为您创建了一个缩减器,并为您管理该状态。您不需要将RTK Query的结果保存到切片中,因为RTK Query已经这样做了-通常您不应该在存储中复制数据。
我强烈建议您从chapter 7开始阅读Redux教程中特定于RTK查询的章节

相关问题