waitForTrigger(dependencies)

会根据当前参数的 RdxState 来返回 RdxState 的值，状态和设置器,，并且这个 hooks 将会订阅这个 RdxState 的值的变化和值的加载状态。

function waitForTrigger<
  T extends RdxValue<any> | RdxValue<any>[] | { [key: string]: RdxValue<any> }
>(
  dependencies: T,
  // triggerFirst为true的时候，当依赖第一次加载的时候会将pendingCompute的状态设置为Status.Running,当一次加载完成的时候，会将pendingCompute设置为Status.IDeal，反之则第一次不会触发任何状态。
  triggerFirst: boolean = true
): {
  triggerOperates: () => {
    // pendingValue
    getDependenciesState: () => T extends RdxValue<infer P>
      ? P
      : {
          [P in keyof T]: UnwrapRdxValue<T[P]>;
        };
    // 通过reset可以重置rdxStates的状态
    reset: () => void;
    // 通过submit可以触发pendingCompute状态的更新
    submit: () => void;
    // 通过loading可以获得pendingCompute当前是否处于加载状态
    loading: () => boolean;
  };
export type UnwrapRdxValue<T> = T extends RdxState<infer R> ? R : never;

Example#

Root

The fallback content to display on prerendering

import React, { useCallback, useMemo } from 'react';
import {
  compute,
  RdxContext,
  isLoading,
  useRdxValueLoader,
  waitForTrigger,
  Status,
} from '@alife/rdx';
const pause = (t: number) => new Promise((resolve) => setTimeout(resolve, t));
const asyncCompute = compute({
  id: 'asyncCompute',
  get: async () => {
    await pause(2000);
    return '延迟2s的数据';
  },
});

const asyncCompute2 = compute({
  id: 'asyncCompute22222',
  get: async () => {
    await pause(4000);
    return '延迟4s的数据';
  },
});

export const Root = () => {
  return (
    <RdxContext>
      <LoadData />
      <LoadData2 />
      <QueryResult />
      <Preview />
    </RdxContext>
  );
};
const waitForTriggerOne = waitForTrigger([asyncCompute, asyncCompute2], false);
const LoadData = () => {
  const value = useRdxValueLoader(asyncCompute);
  return <div>{isLoading(value.status) ? '加载中...' : value.content}</div>;
};

const LoadData2 = () => {
  const value = useRdxValueLoader(asyncCompute2);
  return <div>{isLoading(value.status) ? '加载中...' : value.content}</div>;
};
const Preview = () => {
  const value = useRdxValueLoader(waitForTriggerOne.compute);
  const { loading: isLoading } = waitForTriggerOne.triggerOperates();
  // 如何判断筛选项处于加载中，且之前设置过值了
  return (
    <div>
      <strong>展示数据：</strong>
      {isLoading() && value.status !== Status.IDeal
        ? '加载中'
        : JSON.stringify(value.content)}
    </div>
  );
};
const QueryResult = () => {
  const { submit, reset } = waitForTriggerOne.triggerOperates();
  return (
    <div style={{}}>
      <button
        onClick={() => {
          submit();
        }}
      >
        查询
      </button>
      <button
        onClick={() => {
          reset();
        }}
      >
        重置
      </button>
    </div>
  );
};