标签: redux-toolkit

尝试了解 RTK 查询以及如何在 React 应用程序中最佳地使用它。

Search我的应用程序的一部分中有一个组件。当执行搜索时，我希望结果出现在远离组件树的另一个区域中。

我在文档中看到的所有示例都会立即返回渲染结果，如果Search和Result组件不在同一位置，这是不可能的。如果我将结果解析到商店，这是不好的做法还是错过了 RTK 查询的要点？

我想做什么？

使用 Redux Toolkit，我尝试从名为 的非 React 文件访问值的“存储”，特别是我为其创建“切片”的“用户名” SomeFile.js。

目前尝试执行此操作的代码是什么？

// userMetadataSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  username: "",
};

const userMetadataSlice = createSlice({
  name: "userMetadata",
  initialState,
  reducers: {
    updateUsername: (state, action) => {
      const username = action.payload;
      state.username = username;
    },
  },
});

export const { updateUsername } = userMetadataSlice.actions;

export default userMetadataSlice.reducer;

export const selectUsername = (state) => {
  return state.userMetadata.username;
}

// SomeFile.js

import { selectUsername } from "../redux/userMetadataSlice";
import { useSelector …

我是一个新的 Next 用户，并且已经将 Redux 与 React 结合使用很长时间了，在将 Redux 与 Next 结合使用时遇到了很多麻烦

我已经完成了这个解决方案

商店.js

import { configureStore } from '@reduxjs/toolkit';
import reducers from './rootReducer';

export function makeStore() {
  return configureStore({
    reducer: reducers,
  });
}

const store = makeStore();

export default store;

rootReducer.js

import { combineReducers } from '@reduxjs/toolkit';
import tes from './test/tes';

const reducers = combineReducers({
  test: tes,
});

export default reducers;

_app.js

import React from 'react';
import { Provider } from 'react-redux';
import store from '../redux/store';
import { createWrapper } …

我试图使用 Next.js（React 框架）通过 RTK 查询显示从我的自定义服务器获取的数据数组。这是我第一次使用 RTK 查询。每当我console.log获取数据时，它就会出现在浏览器控制台中。但每当我尝试映射数据以在浏览器中呈现它时，它都会抛出一个错误，提示Cannot read properties of undefined (reading 'map').

undefined我认为如果初始状态是或者null即使状态发生变化，Next.js 总是会抛出错误。这个链接谈到了使用 useMemo 钩子解决问题https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics 但我不太明白。请帮我显示数据。

这是BaseQuery我遵循的函数示例，它源自 redux 工具包文档https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

import axios from "axios";

const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: "" }) =>
  async ({ url, method, data }) => {
    try {
      const result = await axios({ url: baseUrl + url, method, data });
      return { data: result.data };
    } catch (axiosError) {
      let …

我将 redux-toolkit 与 typescript 一起使用，但减速器中的状态始终具有 any 类型，并且会出现错误。

 [export const counterSlice = createSlice({
  name: "counter",
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1; …

我正在为使用 Redux Toolkit 的 Next.js 应用程序运行笑话测试套件。我使用 msw 来模拟对由 Redux Toolkit 处理的 Next 应用程序之外的另一个 api 的任何必要调用。

我没有模拟所有 RTK 查询端点，仅模拟我当前在测试中使用的那些。

当我在没有通过 生成覆盖范围的情况下运行时，测试运行良好npm run test。

但是，当我通过 运行覆盖率报告时npm run test -- --coverage，所有测试都会失败，并且都有相同的错误：

- Test suite failed to run

    No element indexed by 9
    
     at ArraySet_at [as at] (node_modules/source-map-support/node_modules/source-map/lib/array-set.js:109:9)
      at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map-support/node_modules/source-map/lib/source-map-consumer.js:673:30)
      at mapSourcePosition (node_modules/source-map-support/source-map-support.js:214:42)
      at wrapCallSite (node_modules/source-map-support/source-map-support.js:358:20)
      at node_modules/source-map-support/source-map-support.js:399:26
          at Array.map (<anonymous>)
      at Function.prepareStackTrace (node_modules/source-map-support/source-map-support.js:398:30)

我发现如果将 msw 处理程序设置为空数组，则不会出现错误。正如预期的那样，少数需要 API 的测试失败了。然而，除此之外，测试都运行良好。

我不确定从这里该去哪里。任何意见是极大的赞赏。

我正在使用@reduxjs/toolkit并想要创建一个易于扩展的函数，该函数使用默认的减速器创建一个切片。我现在的实现可以工作，但不是强类型的。如何创建一个函数，以便切片的操作类型不仅包含默认的减速器，还包含传入的减速器？我尝试过使用推理类型，但无法使其工作。

任何指导将不胜感激。谢谢。

最小示例：在common.ts文件中（其中逻辑可以在切片之间共享）

export interface StoreState<T> {
  data: T
  status: 'succeeded' | 'failed' | 'idle'
  error: string | null
}

// create a slice given a name and make it possible to extend reducers so they include more than just reset and updateStatus
export const createStoreSlice = <T>(props: {
  sliceName: string
  defaultState: T
  reducers?: SliceCaseReducers<StoreState<T>> // <-- want to infer this in slices/<sliceName>.ts
}) => {
  const { sliceName, reducers, defaultState } = props

  const initialState: …

我已经看到注销后清除/重置商店的解决方案，但不明白如何为以下设置 redux 商店的方式实现相同的功能。

商店.js：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from './ducks/authentication'
import snackbar from './ducks/snackbar'
import sidebar from './ducks/sidebar'
import global from './ducks/global'
import quickView from './ducks/quickView'
import profileView from './ducks/profileView'

const store = configureStore({
  reducer: {
    auth: authReducer,
    snackbar,
    sidebar,
    global,
    quickView,
    profileView,
  },
  middleware: [...getDefaultMiddleware()],
})

export default store

以下是使用@reduxjs/toolkit 中的 createAction 和 createReducer 实现所有 reducer 的方法。

小吃店.js：

import { createAction, createReducer } from '@reduxjs/toolkit'

export const handleSnackbar = createAction('snackbar/handleSnackbar')

export const openSnackBar = …

我试图通过名为 的 redux 操作重置状态resetState，其中我将状态分配给initialState变量，但这不起作用。

const initialState = {
  someArray: [],
  someEvents: {}
}

const stateSlice = createSlice({
  name: "someState",
  initialState,
  reducers: {
    ...someActions,
    resetState: (state, action) => {
      // THIS DOES NOT WORK
      state = initialState
    },
    resetState2: (state, action) => {
      // THIS WORKS!!!!
      return initialState
    },
});

当我返回初始状态时，状态会正确重置，但将其分配给initialState不会。

您好，我试图让 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 = { …