标签: redux-toolkit

我有一些在其状态下使用Sets 的切片。我有这个代码：

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

enableMapSet();

export function configureStore() {
    const rootReducer = combineReducers({
        ...reducers,
    });

    return configureStore({
        reducer: rootReducer,
    });
}

const store = configureStore();
export type AppDispatch = typeof store.dispatch;
export default store;

尽管我安装了immer并调用enableMapSet()，但加载应用程序时仍然出现错误：

未处理的拒绝（错误）：[Immer]“MapSet”插件尚未加载到 Immer 中。要启用该插件，请enableMapSet()在初始化应用程序时导入并调用。

我应该如何配置enableMapSetRedux Toolkit？

我认为我缺少有关 Redux 和 RTK 查询工具的一些东西。我还为此使用 RTK Query OpenAPI codegen。

现在我有一个如下所示的 API ->

export const api = generatedApi.enhanceEndpoints({
  endpoints: {
    getMaterials: {
      transformResponse: response => normalize(response),
    },
  },
})

这在我的组件中很好地返回了标准化数据：

const Materials = () => {
  const { data, isLoading, error } = useGetMaterialsQuery()

  /*
    Cool this gives me data back like:
    {
      [id]: {
        id,
        prop1: 'blah',
        prop2: 'blah2'
      }
    }
  */

  console.log(data)

  // but now I want to structure this data differently using selector

  const newDataStructure = useSelector(addSomeMetaDataAndStructureDifferentlySelector)

  return …

我使用 redux 工具包创建 API 问题很短：如何动态更改 API 中的 baseUrl？详细问题：这里是 createApi 方法 一个对象被传递给这个方法，其中一个键是“baseQuery”

export const WebApi = createApi({
    reducerPath: 'API',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3001/api' }),
    endpoints: () => ({}),
});

那么问题来了，如何动态改变baseUrl呢？它在商店里，但我不能把它放在这里。我尝试了自定义查询文档中的解决方案 https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#constructing-a-dynamic-base-url-using-redux-state

但它不允许精确更改baseUrl，只能动态处理请求本身，该请求已经在baseUrl之后

那么，如何在createApi方法中获取和更改baseUrl呢？

一般来说，强烈建议不要Map使用可变对象，例如.

然而，沉浸式的魔力允许对不可变的对象进行操作，就好像它们是可变的一样。

具体来说，immer 使用enableMapSet支持Map 的不可变版本

在 redux-toolkit 中createReducer并createSlice使用 immer\'s 包装状态操作produce。

总的来说，我认为这些事实意味着这样的代码应该是安全的：

import { createSlice } from \'@reduxjs/toolkit\'\n\nexport const testmapSlice = createSlice({\n  name: \'testMap\',\n  // Using a Map() as redux state\n  initialState: new Map(),\n  reducers: {\n    add: (state, action) => {\n      state.set(action.payload.identity, action.payload)\n    },\n  },\n})\n

但是，当我在 React 组件中使用它时，我收到了礼貌的错误消息A non-serializable value was detected in the state, in the path: `testMap`. Value: Map(1)\xc2\xa0{"A" => {\xe2\x80\xa6}} …

我已经使用 JS 进行了一些 React 工作，但现在我正在创建一个新项目来学习使用 Typescript 进行 React。当我使用JS并需要使用时dispatch，我只是从react-redux导入了useDispatch：

import { useDispatch, useSelector } from 'react-redux';
const AuthAppBar = () => {
  const dispatch = useDispatch();
  const isUserLogged = useSelector(authSelector.isUserLogged);
  const { event } = useGoogleAnalytics();

  const userLogout = () => {
    const userManager = authManager.getUserManager();
    dispatch(authActions.setLoggingOut(true));
    userManager.signoutRedirect({ state: { callbackUrl: routes.home.path } });

    event('Account', 'Logout');
  };

  return <></>;
};

但现在在这个 Typescript 项目中，文档说我需要这样做：

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } …

我用来redux-toolkit生成选择器。我想在我自己的带有参数的自定义选择器中使用它们reselect。但我不知道如何输入我的选择器的返回类型？

const selectOrganizationName = (id: string): ??? =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    organization => organization.name
  );

export default selectOrganizationName;

Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types

我在使用 redux 工具包和 next js 时遇到错误。我面临着这个遗留警告-

/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().

我不明白问题实际发生在哪里，我必须更新我的代码。

这是代码-

这是store.ts-

import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import { combinedReducer } from "./Reducer";

const reducer: typeof combinedReducer = (state, action) => {
    if (action.type === HYDRATE) {
        const nextState = {
            ...state,
            ...action.payload,
        };
        return nextState;
    } else {
        return combinedReducer(state, action);
    }
};

export const makeStore …

我刚刚集成到redux-toolkit. 我的目标是将查询结果存储getPosts在 a 中slice，以便我可以在整个网站上使用它或更改它。

我的createApi是这样的：

  export const postsApi = createApi({
  reducerPath: "posts",
  baseQuery: getGeneralFetchBaseQuery(),
  endpoints: (builder) => ({
    getPosts: builder.query<PostsType, number>({
      query: (id) => `api/posts/${id}`,
    }),
  }),
});

export const { useGetPosts } = postsApi;

我想将结果存储getPosts在这个切片中

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
});

export default postsSlice.reducer;

我的商店是这样的

export const mainStore = configureStore({
  reducer: {
    postsReducer,
    [postsApi.reducerPath]: postsApi.reducer,
  },
})

如何才能实现这一目标？

我在使用Redux-Toolkit时遇到以下错误，这是什么意思？

   name:"ConditionError"
   message:"Aborted due to condition callback returning false."

我想知道我们可以在 React 中将 firebase 查询与 Redux-toolkit createAsyncThunk 或 RTK 查询一起使用吗？