在Redux Toolkit中进行两次相互依赖的连续提取

bt1cpqcv  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(114)

我对Redux中的新做事方式很陌生,我有点困惑。
我想调用一个API端点来获取帐户ID和类别ID。一旦我获取了这些ID,我想向另一个API端点发出另一个请求,以获取事务列表。
我的createApi函数是这样的:

export const accountApiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    prepareHeaders(headers) {
      headers.set("authorization", token);

      return headers;
    },
  }),
  endpoints(builder) {
    return {
      fetchAccount: builder.query<AccountEndpointResponse, void>({
        query() {
          return `/accounts`;
        },
      }),
      fetchTransactions: builder.query<
        TransactionsEndpointResponse,
        { accountId: string; categoryId: string; changesSince: string }
      >({
        query({accountId, categoryId, changesSince}) {
          return `feed/account/${accountId}/category/${categoryId}?changesSince=${changesSince}`;
        },
      }),
    };
  },
});

changesSince参数只是我自己生成的一个ISO日期时间。
在我的App.tsx中,我有:

function App() {
    const { data, isSuccess } = useFetchAccountQuery();

    let accountId = data?.accounts[0].accountUid;
    let categoryId = data?.accounts[0].defaultCategory;

    return ( 
        <header className="App-header">
            <p>Number of accounts fetched: {data?.accounts.length}</p>
            <p>Account Id: {accountId}</p>
            <p>Category Id: {categoryId}</p>

            { accountId && categoryId && <TransactionsTable accountId={accountId} categoryId={categoryId} /> }
        </header>
    );
}

export default App;

最后,在我的TransactionsTable组件中,我有:

import { skipToken } from "@reduxjs/toolkit/dist/query";
import moment from "moment";
import { useFetchTransactionsQuery } from "./accountApiSlice";

interface TransactionsProps {
  accountId: string;
  categoryId: string;
}

const TransactionsTable = (props: TransactionsProps) => {
  const changesSince: string = moment().subtract(7, "d").toISOString();

  const { data, error, isSuccess } = useFetchTransactionsQuery({
    accountId: props.accountId,
    categoryId: props.categoryId,
    changesSince,
  }, skipToken);

  return (
    <>
      {isSuccess && (
        <div>
          <h1>Number of transactions: {data?.feedItems.length}</h1>
        </div>
      )}

      {error && <p>{error.toString()}</p>}
    </>
  );
};

export default TransactionsTable;

我不是100%确定我的方法。我觉得我做错了什么。我觉得我不应该将帐户ID和类别ID作为道具传递给TransactionsTable组件。我觉得我应该直接从状态访问它们,但我不确定如何访问。
第二,我的事务获取应该在页面上触发和呈现,但它不是,我也不知道为什么。
我尝试使用skipToken技术,如下所示:

const { data, error, isSuccess } = useFetchTransactionsQuery({
    accountId: props.accountId,
    categoryId: props.categoryId,
    changesSince,
  }, skipToken);

但是TypeScript并不高兴,我得到了错误:
类型“唯一符号”与类型“UseQuerySubscriptionOptions & UseQueryStateOptions〈查询定义〈{帐户ID:串|未定义;类别ID:串|未定义;更改自:串|未定义; },BaseQueryFn〈字符串|获取参数,未知,获取基本查询错误,{},获取基本查询元〉,从不,事务终结点响应,“api”〉,使用查询状态定义...'.ts(2559)
然而,似乎什么都没有改变。我没有得到Number of transactions: <some number>。我错过了什么?

46qrfjad

46qrfjad1#

skipToken应该传入 * 而不是 * 第一个参数,例如:

useFetchTransactionsQuery(
  someCondition ? realArgument : skipToken
)

相关问题