标签: redux-toolkit

简化示例

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

    type Cake = {
      flavor: string;
      size: 'S' | 'M' | 'L';
    };

const initialState: { all: Cake[]; meta: { currentPage: number } } = {
  all: [],
  meta: {
    currentPage: 0,
  },
};

const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    fetchAll(
      state,
      action: PayloadAction<Cake[], string, { currentPage: number }>,
    ) {
      state.all = action.payload;
      state.meta = action.meta;
    },
  },
});

export default cakeSlice;

我收到这些错误。

Type '
(state: {
    all: …

例如，我有这个切片，我想在 setUser 中使用 dispatch。我怎样才能做到这一点？

const contactsSlice = createSlice({
  name: 'contacts',
  initialState: initialState,
  reducers: {
    setUsers: (state, { payload }) => {
      // I want to use dispatch here
      dispatch()
    },
    toggleFavorite: (state, { payload }) => {
      //
    },
    toggleCheck: (state, { payload }) => {
      //
    }
  }
})

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

const initialState: AppInfo | null = null;

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    selectApp(state, action: PayloadAction<AppInfo>) {
      return action.payload;
    },
  },
});

export const { selectApp } = appSlice.actions;
export default appSlice.reducer;

// models.ts
export type AppInfo = {
  appName: string;
  createDate: string;
  develop: string;
  op: string;
};

我希望state.app在nullredux 启动时，但稍后允许用户选择应用程序。然而，我在减速器上遇到了一个很长的 TypeScript 错误selectApp。这个错误是什么意思？

(method) selectApp(state: null, action: PayloadAction<AppInfo>): AppInfo …

我的案例中有关错误的信息深深地存在于响应中，我正试图将我的项目移至redux-toolkit. 这是以前的样子：

catch(e) {
  let warning
  switch (e.response.data.error.message) { 
    ...
  }
}

问题是redux-toolkit没有将这些数据放在rejected动作创建者中，而且我无法访问错误消息，它将他的消息而不是最初的消息：

虽然原始响应如下所示：

那么我怎样才能检索到这些数据呢？

我正在尝试用 React 重新创建一个类似记忆的游戏。我正在使用 Redux Toolkit 进行状态管理，但我在处理一个用例时遇到了问题。

在 selectCard 操作中，我想将所选卡添加到商店，并检查是否已选择其中 2 张。如果是这样，我想selected在延迟后清空数组。

const initialState : MemoryState = {
    cards: [],
    selected: [],
}

const memorySlice = createSlice({
    name: 'memory',
    initialState: initialState,
    reducers: {        
        selectCard(state: MemoryState, action: PayloadAction<number>) {
            state.selected.push(action.payload);
            if (state.selected.length === 2) {
                setTimeout(() => {
                    state.selected = [];
                }, 1000);
            }
        }
    }
});

卡片被选择得很好，但是当我选择 2 时，1 秒后我收到此错误：

TypeError: Cannot perform 'set' on a proxy that has been revoked， 在线上state.selected = [];

我是这个东西的新手，如何在延迟后访问状态？我必须异步执行吗？如果是这样，怎么办？

我刚开始使用“@reduxjs/toolkit”（版本“^1.5.1”）。

我正在尝试从状态数组（roundScore）中删除一个对象。使用 . 这通常是非常简单的事情filter()。由于某种原因，这不起作用，我不明白为什么。这是我的代码：

减速片：

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

export const roundScoreSlice = createSlice({
    name: "roundScore",
    initialState: {
        roundScore: [],
    },

    reducers: {
        deleteArrow: (state, action) => {
            console.log(`action.payload = ${action.payload}`); // returns correct id

            state.roundScore.filter((arrow) => arrow.id !== action.payload);
        },
    },
});

export const { deleteArrow } = roundScoreSlice.actions;

export default roundScoreSlice.reducer;

反应组件：

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { …

我正在从事一个大项目，其中包含大量基本 URL和资源，我们可以将其理解为许多不同的集成服务。

将 RTK 插入我的应用程序中的资源线（隔离）之后，每个资源都有一个 createApi() 。

我遵循这条路径是因为每个资源都有所有CRUD方法和一些自定义方法，想象一下我们将有 10 个方法（调用）来管理每个资源并且，使用单个创建 API，我可以在单个 createApi/reducerPath 上拥有 200 个方法。

示例：（我想这可以解决我的问题）

// users-api.ts
 export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // getUsers(), getUser(), getManyUsers() createUser(), updateUser(), ... 
 })

// cards-api.ts
 export const cardsApi = createApi({
    reducerPath: 'cardsApi ',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// accounts-api.ts
 export const accountsApi = createApi({
    reducerPath: …

我正在使用“Redux Toolkit Query”并遇到这样的情况：我有一个地点 id 数组，并且想要返回一个检索到的地点数组。但是，根据我当前的设置，我只能查询单个位置，而不能查询整个已编译的位置列表。

我调用查询的挂钩：

function ShowPlaceList() {
  const placeIDs = [1, 2, 3, 4, 5];

  const { data, isFetching, isLoading } = useGetPlaceByIdQuery({
    placeID: placeIDs,
  });

  // data should be an array 
  return (
    <div>
      {data.map(function (item, i) {
        return <ShowPlace {...item} />;
      })}
    </div>
  );
} 

简化切片：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'


export const placeApi = createApi({
  reducerPath: 'placeApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://providePlace.co/api/v2/' }),
  endpoints: (builder) => ({
    getGetPlaceById: builder.query({
      query: ({placeID}) => `place/${placeID}`,
    }), …

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

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

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

我在 Windows 10 操作系统上使用 React Native v0.65.1 (React Native CLI) 和 Flipper 桌面应用程序 v0.114.1。在我的 React Native 应用程序中，我使用 Redux 工具包。据我所知，v0.62 以上的 RN 应该支持开箱即用的 Flipper，并且 Redux 工具包不需要为 Flipper 提供额外的中间件配置。

我尝试安装 Flipper-plugin-redux-debugger 的 npm 包，但什么也没有，Flipper 中的 Redux Debugger 仍然不可用。

我的问题出在哪里？