Redux Toolkit使用RTK Query时提示prepareHeaders不是函数如何解决

错误原因 #

fetchBaseQuery 的 prepareHeaders 配置要求传入函数类型，你当前直接传入了请求头对象，框架运行时尝试调用该配置执行逻辑，就会抛出「不是函数」的报错。
同时你原先的写法会在模块初始化时就读取一次localStorage中的token，后续token更新后也不会自动同步，存在请求携带旧token的问题。

修正代码 #

// Define a service using a base URL and expected endpoints
export const lfApi = createApi({
    reducerPath: 'lfApi',
    baseQuery: fetchBaseQuery({
        baseUrl: 'http://homestead.test/api/v1',
        prepareHeaders: (headers) => {
            // 每次请求都重新读取最新token
            const access_token = localStorage.getItem('rs_access_token');
            if (access_token) {
                headers.set('Authorization', `Bearer ${access_token}`);
            }
            headers.set('Content-Type', 'application/json');
            headers.set('Accept', 'application/json');
            return headers;
        },
    }),
    endpoints: (builder) => ({
        getUser: builder.query({
            query: (params) => `user`,
        }),
        getAgent: builder.query({
            query: (params) => `myagents/agents/${params}`,
        }),
    }),
});

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetUserQuery, useGetAgentQuery } = lfApi;

内容的提问来源于stack exchange，提问作者Bon Andre Opina