小编Ale*_*min的帖子

我需要在按下按钮时下载一组图像。目前，我正在使用以下方式这样做react-native-fs：

const downloadImageItem = async (imgUrl, id) => {
  const path = `${RNFS.DocumentDirectoryPath}/${id}.jpg`;

  RNFS.downloadFile({
    fromUrl: imgUrl,
    toFile: path,
  });
};

const downloadImages = async (items) => {
  for (const item of items) {
    if (item.images.length) {
      await downloadImageItem(item.images[0].thumb, item.images[0].id);
    }
  }
  return Promise.resolve();
};

从我的减速器中为 3 种类型的项目调用函数：

await downloadImages(items_one);
await downloadImages(items_two);
await downloadImages(items_three);

我的问题是有时我会收到一条错误消息： 过多的待处理回调数：501

有没有更好的方法来做同样的事情，这样错误就不会出现？

我正在尝试 Redux-Toolkit，我真的很喜欢它的简洁性，但我不知道应该如何读取服务器响应状态代码并据此分派不同的操作。例如，我正在向 API 发送注册请求

export const registerRequest = createAsyncThunk(
  'register/registerRequest',
  async (userInfo: RegisterInfo) => {
    const { firstname, lastname, email, password } = userInfo

    const { data } = await axios.post('url/users/create', {
      firstname,
      lastname,
      email,
      password,
    })
    return data
  }
)

我可能会收到不同类型的错误，但所有这些错误都由我的切片中的单个案例处理

builder.addCase(registerRequest.rejected, (state, action) => {
      state.loading = false
      state.error = action.error
    })

使用 Redux-Toolkit 检查状态代码并分派相应操作的正确方法是什么？

我正在尝试让useQuery钩子与 TypeScript 一起工作。

这是我的查询

export const FETCH_LINKS = gql`
  query FetchLinks {
    feed {
      links {
        id
        createdAt
        url
        description
     }
  }
}
`;

我从 GraphQL 模式生成了类型 graphql-codegen

export type Feed = {
  __typename?: 'Feed';
  links: Array<Link>;
  count: Scalars['Int'];
};

export type Link = {
  __typename?: 'Link';
  id: Scalars['ID'];
  createdAt: Scalars['DateTime'];
  description: Scalars['String'];
  url: Scalars['String'];
  postedBy?: Maybe<User>;
  votes: Array<Vote>;
};

在我的组件中，我将类型应用于useQueryhook

const { data, loading, error } = useQuery<Feed>(FETCH_LINKS);

问题是在data变量中我收到了以下形状的对象：

{
feed: {
  __typename …

我有一个 DropdownFilter演示组件，我想将其重用于多个不同的过滤器。

const DropdownFilter: React.FC<DropdownFilterProps> = ({
  filterValue,
  filterOptions,
  onClickHandler,
}) => {
  return (
    <Dropdown>
      <Dropdown.Toggle id="dropdown">{filterValue}</Dropdown.Toggle>
      <Dropdown.Menu>
        {filterOptions.map((option, i) => (
          <Dropdown.Item onClick={() => onClickHandler(option)} key={i}>
            {option}
          </Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

export default DropDownFilter;

每个过滤器的状态由filterReducerin控制Redux。这是否意味着我必须创建多个容器组件才能获取每个单独过滤器的数据？

const StatusFilterContainer: React.FC = () => {
  const statusFilterValue = useSelector(getStatusFilterValue);
  const statusFilterOptions = ["Show All", "Pending", "Completed", "Cancelled"];

  const onStatusFilterChange = (filterValue: string): void => {
    dispatch(setStatusFilterValue(filterValue));
  };

  return (
    <>
      <DropDownFilter
        onClickHandler={onStatusFilterChange}
        filterOptions={statusFilterOptions}
        filterValue={statusFilterValue} …

我似乎无法从 我对 Typescript 相当陌生的人那里收到PromisefromcreateAsyncThunk函数Redux-toolkit，我正在努力弄清楚为什么它会给我 Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>'错误，即使如果我删除打字，承诺确实会返回。这是我的createAsyncThunkfn

export const getStudentByIdRequest = createAsyncThunk<Student, number>(
  'student/getStudentByIdRequest',
  async (id, { rejectWithValue }) => {
    try {
      const { data } = await instance.get(`student/${id}/`)
      return data
    } catch (err) {
      let error: AxiosError = err
      if (error) {
        return rejectWithValue({
          message: `Error. Error code ${error.response?.status}`,
        })
      }
      throw err
    }
  }
)

这就是我从React组件中发送它的方式

dispatch(getStudentByIdRequest(userId)).then((res) => console.log(res)) …

我正在开发一个有多个切片的应用程序。我正在使用createAsyncThunkAPI 调用，我喜欢它，因为它为 API 请求的不同状态提供了动作创建器，以便我可以跟踪减速器中的加载状态和错误。但我的问题是，如果我想有一个单独的减速器来跟踪loading，error以及success我的 API 调用，我该如何实现redux-toolkit

我知道我可以dispatch从我的createAsyncThunk函数中执行一个操作，但感觉不对，并且有点违背了函数本身的目的。此外，减速器内部的副作用被认为是一种不好的做法。所以，我在这一点上有点困惑，我想Loader在应用程序的根目录中只有一个组件，当加载状态为真时触发，并且加载的内容并不重要

这是我当前代码的示例：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { AxiosError } from 'axios'
import { masterInstance } from 'api'
import { GetAccessCodeParams, RegistrationStateType } from 'store/slices/registration/types'

export const getAccessCodeRequest = createAsyncThunk<void, GetAccessCodeParams, { rejectValue: { message: string } }>(
  'registration/getAccessCodeRequest',
  async ({ email }, { rejectWithValue }) => {
    try {
      await masterInstance.post(`/authorization/getAccessCodeWc`, { email })
    } …