我对 redux 工具包还很陌生，所以我仍然有一些问题！

按下面的代码，我试图访问状态（loginDetails.username和loginDetails.password我的内）createAsyncThunk。我显然在这里做错了 - 我尝试createAsyncThunk在不同的文件中编写函数，尝试访问该文件中的状态，然后导入该函数，但无论哪种方式它都失败了。

// Import: Packages
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// AsyncThunk: getUserDetails
export const getUserDetails = createAsyncThunk(
  "userDetails/getUserDetails",
  async () => {
    try {
      const apiUrl = process.env.REACT_APP_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&Password=${state.loginDetails.password}`,
        headers: {
          accept: "application/json",
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  } …

我有一个基于 redux-toolkit 构建的简单应用程序。我正在调度 createProduct 操作，该操作运行良好。我想在 createProduct 操作后导航到 /products/ 页面表单 /products/new 页面。我如何使用导航（react-router-dom）来做到这一点。

我尝试了这个内部动作但失败了

 [createProduct.fulfilled]: (state, { payload }) => {
      toast.success('Product Created Successfully!');
      const navigate = useNavigate()
      navigate('/products')
      return {
        ...state,
        loading: false,
        products: state.products ? [...state.products, payload.product] : [payload.product]
      };
    },

我也尝试将导航传递给有效负载，但遇到了此错误：

 You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

我正在像这样调度 createProduct

 const handleSubmit …

我正在使用 RTK 查询来处理我的请求。但我在取消请求时遇到问题。

场景是这样的，我有一个模式来显示一个表单来添加待办事项，但是，当用户想要关闭模式时，如果请求尚未挂起，则应该取消该请求。

const [addTodo, { isLoading }] = useAddTodoMutation();

const onSubmit = async (values: ToDo) => {
     try {
      await addTodo(values).unwrap();
      console.log('Successful')
    } catch (error) {
      console.log('failed')
    }
  };

我知道有一个abort取消突变addTodo(values).abort();，我们可以在useEffect清理中使用它useRef。

是否可以编写通用方法或自定义挂钩来包装所有突变并在卸载组件时处理取消请求？

我正在尝试使用 RTK 查询通过异步函数设置 contactSlice.ts 的初始状态。

我已阅读文档并在线搜索，但没有找到解决此问题的合适解决方案。

联系人API.ts：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Contact } from '../models/contact.model';

export const contactsApi = createApi({
    reducerPath: "contactsApi",
    baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3006/" }),
    tagTypes: ['Contact'],
    endpoints: (builder) => ({
        contacts: builder.query<Contact[], void>({
            query: () => '/contacts',
            providesTags: ['Contact']
        }),
        contact: builder.query<Contact, string>({
            query: (id) => `/contacts/${ id }`,
            providesTags: ['Contact']
        }),
        addContact: builder.mutation<{}, Contact>({
            query: contact => ({
                url: '/contacts',
                method: 'POST',
                body: contact    
            }),
            invalidatesTags: ['Contact']
        }),
        updateContact: builder.mutation<void, Contact>({ …

Problem

I am using Redux Toolkit and TypeScript to create a Todos app. I want to create middleware that will listen for a dispatched action so I can then dispatch async actions.

What I have so far

// listenerMiddleware.ts
import { createListenerMiddleware, addListener } from '@reduxjs/toolkit'
import type { TypedStartListening, TypedAddListener } from '@reduxjs/toolkit'

import type { RootState, AppDispatch } from './store'

export const listenerMiddleware = createListenerMiddleware()

export type AppStartListening = TypedStartListening<RootState, AppDispatch>

export const startAppListening =
  listenerMiddleware.startListening as AppStartListening …

我真的很喜欢 graphql + rtk 查询，但我无法让 graphql 订阅工作。

我几乎直接从redux文档中复制了流式更新示例。但我得到了错误subscriptions are not supported over HTTP, use websockets instead。

我不知道如何解决这个问题，有帮助吗？几乎找不到任何有关 graphql 订阅 + rtk 查询的文档

userStatus: builder.query<
      UserStatusSubscriptionSubscription,
      {
        event_id: string;
        user_id: string;
      }
    >({
      query: ({ event_id, user_id }) => ({
        document: gql
          subscription UserStatusSubscription(
            $event_id: uuid!
            $user_id: String!
          ) {
            eetschema_event_by_pk(id: $event_id) {
              event_attendees(where: { user_id: { _eq: $user_id } }) {
                status
                event_id
                user_id
              }
            }
          }
        ,
        variables: { event_id, user_id },
      }),
      async onCacheEntryAdded(
        arg, …

我已经在我的一个项目中集成了 RTK 查询，并且我试图了解如何处理我的表的 UI。我已经阅读过其他 StackOverflow 问题（例如那个问题），但我无法找到我的用例的答案。

我的表格行对其有操作，因此用户可以直接从表格页面编辑或删除行项目。

我正在使用以下 RTK 查询挂钩：

// To fetch the data that populates the table. 
// 'isLoading' is used to show the spinner all over the table
const {data, isLoading} = useGetItemsQuery()

// To trigger the edit of the item.
const [triggerEditItem] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

// To get when the editing is happening 
const [, {isLoading: isEditing}] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

这是我的切片：

serviceApi.injectEndpoints({
  endpoints: (builder) => ({
    getItems: builder.query({
      providesTags: [TAGS.ITEMS], …

我在使用 redux-toolkit 和新的应用程序目录时遇到问题。有没有一种特殊的方法来实现提供者，因为到目前为止我尝试过的一切都失败了。

以下过程与现有页面目录完美配合...

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { store } from "../store";
import Navbar from "./Navbar";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Navbar />
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

但是，新的根布局不接受该提供程序。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  );
}

任何意见是极大的赞赏。谢谢

我尝试了各种实现 redux 的方法......

import { Provider } …

您好，我正在使用 RTK 查询进行 API 交互，但遇到一些错误，如果错误或成功，我会触发突变端点失效，始终会执行。

我正在寻找的是使突变成功的标签无效这是我的代码

获取端点

getPosts: builder.query({ query: () => /帖子, providesTags: ['Posts'], transformResponse: (response, meta, arg) => response.data, transformErrorResponse: (response, meta, arg) => response.data?.message ?? response , })

突变终点

mutatePost: builder.mutation({ query: (data,id) => ({ url: id?/posts/${id} : /posts`, 方法: id?'PATCH':'POST', 正文: 数据, }),

  transformResponse: (response, meta, arg) => response.data,
  transformErrorResponse: (response, meta, arg) => response.data?.message ?? response , 
  invalidatesTags: ['Posts'],

})`

我尝试了所有可用的结果，但不符合我的期望

我正在使用Redux Toolkit和RTK 查询构建一个项目，并尝试从 API 获取一些条目。我使用的是标准化数据方法，createEntityAdapter因为在某个组件中我需要将数据作为数组，所以我最终使用了选择器。现在我的问题是，由于我添加过滤器作为查询的参数，我的选择器停止工作。

我在这里研究了类似的问题，例如：如何使用带参数的 RTK 查询选择器？，但我太笨了，无法理解我应该修改什么。我试图理解RTK 查询文档，但我做不到。

从上面的问题中我得知我的选择器还需要具有参数才能准确地知道要选择什么，并且这不是推荐的模式，但我无法理解如何使其工作。

我的入口切片：

import { createSelector, createEntityAdapter } from '@reduxjs/toolkit'
import { apiSlice } from './apiSlice'

const entryAdapter = createEntityAdapter()

const initialState = entryAdapter.getInitialState({
  ids: [],
  entities: {},
})

export const entryApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    initialState,
    getEntry: builder.query({
      query: (filters) => ({
        url: '/history',
        params: filters,
      }),
      transformResponse: (responseData) => {
        return entryAdapter.setAll(initialState, responseData)
      },
      providesTags: (result, error, arg) => …