标签: redux-toolkit

import { configureStore } from "@reduxjs/toolkit";
import testSlice from "./testSlice";
import {combineReducers} from "redux";

const rootReducer = combineReducers({test: testSlice})
export const store = configureStore({
  reducer: rootReducer,
});

哪一个更好？出于性能和使用目的。哪个好用？

我正在使用一个非常基本的 RTK 查询挂钩从 API 获取一些用户数据。如何访问组件内商店中保存的数据？我无法从 RTK 查询在特定事项中生成的存储中获取数据。

我有一个简单的 Post API，我调用了 getPosts 挂钩。在 Redux devtools 中，我可以看到来自我商店中 RTK 查询挂钩的数据：

发布API

import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';

export interface Post {
  id: number;
  name: string;
  fetched_at: string;
}

type PostsResponse = Post[];

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  entityTypes: ['Posts'],
  endpoints: (build) => ({
    getPosts: build.query<PostsResponse, void>({
      query: () => 'posts',
      provides: (result) => [
        ...result.map(({ id }) => ({ type: 'Posts', id } as const)), …

我对 Redux（尤其是 Redux Toolkit）相当陌生，无法理解以下问题。

我正在用 Toolkit 重写旧代码。

我知道我可以在 createSlice 中执行以下操作。

  reducers: {
    changeDay: (state, action) => {
      state.day = action.payload;
    }
}

并像这样调度：

  store.dispatch(changeDay(true));

然而，我的应用程序中的许多场景都采用第二个参数，给出了没有工具包的旧 redux 的示例

case ACTIVITY:
  return {
    activity: action.data.first,
    anotheractivity: action.data.second,
  };

此操作如下所示：

function clickedActivity(first = undefined, second = undefined) {
  const data = {
    first,
    second,
  };
  return {
    type: ACTIVITY,
    data,
  };
}

在这种情况下，我能够调用dispatch(clickedActivity(first,second))并根据需要获取两个值。

我认为我一直在文档中寻找错误的关键字，因为我找不到解决方案。有什么提示吗？

我已经在 redux-toolkit 中成功实现了乐观更新。但我无法正确输入。我的代码类似于 redux-toolkit 的示例。

const postsApiSlice = api.injectEndpoints({
  endpoints: (builder) => ({
    getPost: builder.query<Post, number>({
      query: (id) => ROUTES.POST(id),
      providesTags: (result, error, id) => {
        return [{ type: POST_TAG, id }]
      },
    }),
    updatePostWithOptimism: builder.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
      query: ({ id, ...patch }) => ({
        url: ROUTES.POST(id),
        method: 'PATCH',
        body: patch,
      }),
      async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
        // ERROR at 'getPost': Argument of type 'string' is not assignable to parameter of type 'never'.ts(2345) …

我正在学习 RTK 查询并且真的很困惑。如果有人能指出我正确的方向，我会很高兴。createAsyncThunk我的问题是如何像使用和设置时一样操作应用程序商店的状态extraReducers。

export const asyncApiCall = createAsyncThunk("api/get_data", async (data) => {
    
    const config = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
   
    };
    
    const res = await axios.get( "http://apiserver/path_to_api",data,config );
    return res['data']
} )

export const mySlice  = createSlice({
    name:"mySliceName",
    initialState:{
        data: [],
        loadInProgress: false,
        loadError: null,
        extraData: {
           // something derived based on data received from the api 
        }

    },

    extraReducers: {
        [asyncApiCall .pending]: (state) => {
            state.loadInProgress = true;
    
        },
        [asyncApiCall .fulfilled]: (state,action) …

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

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

现实世界的用例

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

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

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

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

问题

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

我正在createSlice这样使用：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState = {} as Order;

const order = createSlice({
  name: 'order',
  initialState,
  reducers: {
    setOrder: (_state, { payload }: PayloadAction<Order | null>) => payload,
  },
});

我收到以下错误：

Type 'SalesOrder | null' is not assignable to type 'void | SalesOrder | WritableDraft<SalesOrder>'.
  Type 'null' is not assignable to type 'void | SalesOrder | WritableDraft<SalesOrder>'.ts(2322)

Run Code Online (Sandbox Code Playgroud)

当我将鼠标悬停在该函数上时，我得到以下类型：

function(_state: WritableDraft<SalesOrder>, { payload }: PayloadAction<SalesOrder | null>): SalesOrder | null

我该如何解决？我希望该值为Order或null …

我正在使用 redux-toolkit，并尝试发送一个 thunk。我正在使用的调度函数看起来像这样，这直接取自文档。eslint 抱怨缺少返回类型，知道它应该是什么吗？

export const useAppDispatch = () => useDispatch<AppDispatch>();

此外，我得到了同样的错误，如这个问题How to split an Action or a ThunkAction (in TypeScript, with redux-thunk)? ，但据我了解，没有真正的解决方案。

所以如果我得到这样的代码：

export const fetchSomeThing = createAsyncThunk<SomeType[]>('someThing/fetch', async () => {
  const someClient = useSomeClient();
  const someThing: SomeType[] = await someClient.listSomething();
  return someThing;
});

// I also tried typing dispatch as AppDispatch here explicitly, but it gives me the same error
const dispatch = useAppDispatch();
dispatch(fetchSomeThing()) //This gives an error: Property 'type' is missing in type …

如何正确拒绝createAsyncThunk. 我有一个异步函数来检查邮件地址是否已存在。如果没有注册的邮件地址，则该函数的响应为空字符串；如果用户存在，则该函数的响应为注册用户的用户对象。

export const checkIfEmailExists = createAsyncThunk(
  "user/checkIfEmailExists",
  async (mail) => {
    const response = await mailExists(mail).promise();
    if (response.user && response.user.length > 0) {
      reject();
    } else {
      resolve();
    }
  }
);

在这两种情况下，数据都会返回并且不会发生错误。createAsyncThunk在这种情况下我该如何拒绝？