标签: redux-toolkit

我正在尝试使用 RTK 查询突变将文件上传到 API。这是我的突变代码：

    addBanner: builder.mutation({
          query(body) {
            return {
              url: `/api/banners`,
              method: 'POST',
              body,
            }
          },
        })

这是我生成请求数据的方法。

    const [addBanner, { isBannerLoading }] = useAddBannerMutation();

    const new_banner = new FormData();    
    new_banner.append("file", my_file);
    new_banner.append("type", my_type);
    new_banner.append("title", my_title);
    addBanner(new_banner).unwrap().then( () => ... 

但我收到一个错误：

A non-serializable value was detected in the state, in the path: `api.mutations.L-Mje7bYDfyNCC4NcxFD3.originalArgs.file`...

我知道我可以通过中间件完全禁用不可序列化检查，但我认为这不是使用 Redux Toolkit 和 RTK 的合适方法。没有文件一切正常。RTK上传文件有什么正确的方法吗？

我正在尝试构建一个拦截器，以应对 RTK 查询访问令牌无效的情况。我已经通过文档中的示例构建了它，如下所示：

const baseQuery = fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders: (headers, { getState }) => {
        const {
            auth: {
                user: { accessToken },
            },
        } = getState() as RootState;
        if (accessToken) {
            headers.set('authorization', `Bearer ${accessToken}`);
        }
        return headers;
    },
});

const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
    args,
    api,
    extraOptions
) => {
    let result = await baseQuery(args, api, extraOptions);

    if (result.error && result.error.status === 401) {
        const refreshResult = await baseQuery('token/refresh/', api, extraOptions);

        if (refreshResult.data) …

我刚开始使用 RTK 查询，但遇到问题

我的应用程序在一个大 JSON 中包含所有设置，因此我创建一个 RTK 查询来获取设置。在教程中，示例是关于useQuery在组件中使用钩子并立即显示结果，但由于设置太大，因此需要多个页面/组件来显示它并允许用户更改设置

因为需要更改设置，所以我认为将状态放入商店是一个好主意，我的问题是如何将API结果放入商店？

我可以看到一些围绕它的方法

1. useQuery在组件中使用，当它产生时，然后进行调度以将数据放入存储中

2. 从 API 中放入useQuery所有组件都使用它并使用它来获取缓存数据，那么就不需要将其放在存储上并使用组件状态来设置更改（我不确定这种方法，因为有很多设置 - 即使分为不同的页面，使用组件状态来管理它似乎也不正确）

我是 RTK 和 RTK 查询的新手，只是想知道最好/好的方法是什么？

我正在重构我的减速器以使用 redux-toolkit 的createSlice. 现在我有一个非常基于事件的减速器，有时需要针对不同的操作进行类似的状态更新。根据最初的switch/case声明，这不是问题：

        case ActionTypes.CREATION_CANCELLED:
        case ActionTypes.NEW_MARKER_INFOWINDOW_CLOSED:
        case ActionTypes.MARKER_SELECTED:
            return {...state, isCreating: false};

这种行为可以通过createSlice函数实现吗？

我无法设置getState()to的返回类型RootState。我正在使用打字稿和 VSCode。我必须将类型设置为any，这会停止该对象上的 IntelliSense。下面是有问题的代码：

export const unsubscribeMeta = createAsyncThunk(
  'meta/unsubscribe',
  async (_, { getState }) => {
    const { meta } = getState() as any;
    const res = await client.post<apiUnsubscribeResponse>(
      `/meta/unsubscribe/${meta.subscriptionId}`
    );
    return res.data.data;
  }
);

如果我尝试使用RootState而不是any，VSCode 会在模块中标记许多错误。我相信这是由于商店和这个切片的循环依赖。我RootState在模块中的许多地方使用了选择器，没有问题。有没有解决的办法？

我是 RTK 查询的新手，在使用不同参数的查询之间共享数据时遇到问题。

// api.js
const { useGetStuffQuery } = api.injectEndpoints({
  endpoints: (builder) => ({
    getStuff: builder.query({
      query: (stuffId) => ({ url: `http://some.random-url.com/${stuffId}` }),
    }),
  }),
});

// component.js
function(props) {
  const [id, setId] = useState(1);
  const { data, isLoading } = useGetStuffQuery(id);

  if (val === '2') {
    console.log('datttt', data); // this initially prints data from id:1
  }

  return <div>
      <input value={id} onChange={(e) => setId(e.target.value)} />
      {
        isLoading ? <span>loading...</span>
                  : <span>data is: {data}</span>
      }

  </div>
}

当我将 id 从 …

鉴于这种

export const slice = createSlice({
    name: 'reducer',
    initialState: {

    },
    reducers: {
       test: (state, action) => {
           console.log(action.payload) // 1
       } 

    },

})

然后我运行这个

dispatch(test(1,2,3,4,5,6,7)) 

action.payload只是第一个参数。怎样才能得到另外6个呢？

我在 React Native 应用程序中使用@redux/toolkitwith 。redux-persistTypeScript

商店.ts

    import { configureStore } from '@reduxjs/toolkit';
    import { combineReducers } from 'redux';
    import { persistReducer, persistStore } from 'redux-persist';
    import thunk from 'redux-thunk';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import calenderReducer from './reducer/calender';

    const reducers = combineReducers({
    graph: calenderReducer,
    });

    const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    };

    const persistedReducer = persistReducer(persistConfig, reducers);

    export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk],
    });

    // Infer the `RootState` …

我正在使用 redux-toolkit，并且尝试在每次更新商店后将状态保存到本地存储，而不使用任何第三方库。原因是 redux-persist 不再更新，我不知道有什么好的替代方案。经过大量时间寻找解决方案后，我想出了使用createListenerMiddleware.

import { configureStore, createListenerMiddleware } from "@reduxjs/toolkit";
import counterSlice, { decrement, increment } from "../Slices/counterSlice";

const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
    actionCreator: increment,
    effect: () => (
        localStorage.setItem('count', JSON.stringify(store.getState().counter))
    )
})
const listenerMiddleware2 = createListenerMiddleware()
listenerMiddleware.startListening({
    actionCreator: decrement,
    effect: () => (
        localStorage.setItem('count', JSON.stringify(store.getState().counter))
    )
})
const counterState = JSON.parse(localStorage.getItem('count') || "null")
export const store = configureStore({
    preloadedState: {
        counter: counterState === null ? { value: 0 } : counterState
    },
    reducer: {
        counter: counterSlice …

我正在使用 Redux-toolkit-query 从服务器获取数据。现在我想在单击按钮时调用我的查询，而不是自动调用。我尝试了这个，但它不起作用。

const { data, refetch } = useGetBuisnessAreasQuery({
    enable: false,
    refetchOnWindowFocus: false,
    manual: true,
    refetchOnReconnect: false,
  });