标签: redux-toolkit

您好，我试图让 redux 继续使用 redux 工具包（也在打字稿中），但出现以下错误：

Exported variable 'store' has or is using name '$CombinedState' from external module "home/..../node_modules/redux/index" but cannot be named.

我看到这个问题之前在这里被问过，但也没有得到回答。

以下是我的代码，如果您有解决此问题的想法，请告诉我，谢谢

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import {combineReducers} from 'redux';
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import myModuleReducer from "../../modules/my-module/redux/my-module-slice";
import myModuleTwoReducer from "../../modules/my-module-two/redux/my-module-two-slice";

import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

const persistConfig = { …

在我的 api 上，我有两个突变，奇怪的是，其中一个确实触发了重新获取，但另一个没有，我不知道为什么。这两种突变都会进行网络调用，并且更改会反映在服务器中。

这是我的 api 定义。

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";
import Sample from "core/types/Sample";
import getApiURL from "core/utils/getApiURL";

export const lithologyApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: getApiURL() }),
  tagTypes: ["Samples"],
  endpoints: build => ({
    addSample: build.mutation<Sample, Sample>({
      query: sample => ({
        url: `lithology/add-sample`,
        method: "POST",
        body: sample,
      }),
      invalidatesTags: ["Samples"],
    }),
    getSamples: build.query<Sample[], void>({
      query: () => "lithology/get-samples",
      providesTags: ["Samples"],
    }),
    deleteSample: build.mutation<void, number>({
      query: id => ({ url: `lithology/delete-sample/${id}`, method: "DELETE" }),
      invalidatesTags: ["Samples"],
    }),
  }), …

我怎样才能记住我的rawTranscript变量，这样它就不会触发useEffect下面的函数，从而触发昂贵的transcriptParser函数？我一直在尝试很多不同的方法，但事实上，我使用 redux-hook ( useAppSelector) 从存储中捕获数据意味着我无法使用空依赖项 useEffect 进行初始安装（钩子不能位于内部）使用效果）。出于同样的原因，我似乎也无法用useAppSelector任何一个来包装。useMemo

关于如何记住变量rawTranscript以便它不会重新触发的任何想法useEffect？

useMemo在, ,useEffect中使用 redux-hook 时出错useCallback：

React Hook“useAppSelector”无法在回调内调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

成分

const TranscriptCardController = (): JSX.Element => {
  const dispatch = useAppDispatch();
  // how to memoize rawTranscript?
  const rawTranscript = useAppSelector(selectRawTranscript);
  const parsedTranscript = useAppSelector(selectParsedTranscript);

  useEffect(() => {
    const parsedResult = transcriptParser(rawTranscript, undefined, 0.9);
    dispatch(updateParsedTranscript(parsedResult));
  }, [dispatch, rawTranscript]);

  // ... …

createApi您好，我最近学习了带有 rtk 查询工具的新 React 工具包，并且我正在尝试使用rtk 包中的工具将登录系统放在一起。

After giving it a test on the login button pressed, I see the network request going through without any issue(status code 200), and I get a response object providing user, token, however, when I try to get the returning data using useLoginMutation I get an undefined value.

below is the code for my endpoint which is injected in a base api:

export const apiLogin = theiaBaseApi.injectEndpoints({
  endpoints: (build) => ({
    loginUser: …

我有以下切片：

export const authenticationSlice = createSlice({
    name: 'authentication',
    initialState: {
        isFirstTimeLoading: true,
        signedInUser: null
    },
    reducers: {
        signOut: (state) => {
            state.signedInUser = null
        },
        setUserAfterSignIn: (state, action: PayloadAction<SignInResult>) => {
            // some logic...
            state.signedInUser = {...}
        }
    },
    extraReducers: builder => {
        // Can I subscribe to signedInUser changes here?
    }
})

有什么方法可以在内部发生变化时订阅signedInUser（setUserAfterSignIn和signOut）extraReducers？

例如，每次setUserAfterSignIn调度操作时，我想在 axios 中添加一个拦截器，该拦截器使用用户的 accessToken 作为 Auth 标头。

我也可以从另一个切片订​​阅这个状态吗？如果不同切片中的某些状态取决于signedInUser？

编辑：这是登录用户和注销用户的重击

export const { signOut: signOutAction, …

问题：当向同一端点发出多个请求时，useLazyQueryHook 将仅返回状态设置为“已完成”的最新查询和响应数据的响应，而之前发出的其他请求则停留在“待处理”状态且没有响应数据。

所需的功能：惰性查询挂钩不会覆盖先前的返回（如果是覆盖），而是返回每个查询的数据，这些数据可以在 useEffect 挂钩 f.ex 中访问。使用 RTK 时，这可能不是该用例的正确方法吗？

我在 createAPI 中有以下端点...

  getLoggerCheck: builder.query<any, any>({
        query: ({ loggerId }) => ({
            url: '/scan/check',
            params: {
                logger: loggerId,
            }
        }),
        transformResponse(data: any) {
            console.log(data);   // <---- Correct data for each request is logged out here
            return data;
        }
    })

...但是当像这样使用生成的 useLazyGetLoggerCheckQuery 挂钩并每秒发出大约 5 个请求时，runLoggerChecks({loggerId: XXXXX})仅返回最近的查询，并返回数据和状态“已完成”。

const [runLoggerCheck, loggerCheckResponse] = useLazyGetLoggerCheckQuery();

useEffect(() => {
    console.log(loggerCheckResponse)
}, [loggerCheckResponse]);

我在使用 redux 和 RTK 查询时遇到了 useAppSelector。那么 useSelector 和 useAppSelector 之间有什么区别或者两者的工作方式相同？

RTK 查询似乎有效，因此当缓存结果失效时，会立即重新获取失效的查询。我希望当程序请求无效数据时会执行重新获取，但不会更早。

现实世界的用例

假设我有一个应用程序，用户需要登录 - 这是大多数网络应用程序都会做的事情。假设我有三个端点：

• 登录突变 - 让用户登录
• getAuthInfo查询 - 获取经过身份验证的会话数据（已providesTags: ['AuthData']设置）
• 注销突变 - 注销用户（已invalidatesTags: ['AuthData']设置）

当用户登录时，代码请求经过身份验证的会话信息。并且该数据自然会被缓存，因为许多页面可能需要该信息的某些数据。

但是，当用户稍后注销时，缓存的数据将失效（根据自动失效标签设置），因此 RTK 查询库会立即重新获取。由于显而易见的原因，此类调用会失败并返回 HTTP 401。

问题

如何防止立即重新获取无效的查询？在上面的示例中，我希望当代码对端点进行新调用时重新获取数据，但不能更早。是否可以控制 RTK 查询中的重新获取行为？

尝试使用 redux-toolkit rtk 查询运行第一个测试，并收到 api 未定义的错误。我做错了什么？

  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read property 'injectEndpoints' of undefined\n\n      33 | };\n      34 |\n    > 35 | export const authApi = api.injectEndpoints({\n         |                            ^\n      36 |     endpoints: (build) => ({\n      37 |         login: build.mutation<ILoginResponse, ILoginData>({\n      38 |             query: ({ username, password, captchaToken }) => {\n\n      at Object.<anonymous> (src/api/auth.ts:35:28)\n      at Object.<anonymous> (src/features/auth/authSlice.ts:2:1)\n      at Object.<anonymous> (src/api/index.ts:10:1)\n      at Object.<anonymous> (src/mocks/handler.ts:3:1)\n      at Object.<anonymous> (src/mocks/server.ts:3:1)\n      at Object.<anonymous> (src/setupTests.ts:6:1)\n      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)\n      at runJest (node_modules/@jest/core/build/runJest.js:404:19)\n …

我正在学习 Redux 工具包。从 React POV 来看，使用内联箭头函数从 useSelector 中访问您需要的状态的任何部分似乎非常直观，然后进行任何计算。作为示例，请考虑 redux 存储中的购物车商品及其数据（例如商品计数）。

function CartItemCounter({ itemId }){
  const cart = useSelector(state => state.cart);
  const itemInCart = cart.items[itemId];
  const count = itemInCart?.count || 0;

  return <div>{itemId} - {count} nos</div>
}

但我看到所有这些信息都表明您应该在切片旁边定义选择器，使用 createSelector 等。什么是正确的方法，为什么更好？