useRdxValueLoader(state)

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

function useRdxValueLoader<GModel>(state: RdxState<GModel>): LoaderValue<GModel>;
interface LoaderValue<GModel> {
  status: Status,
  content?:  GModel
  errorMsg?: string
}
enum Status {
  Running = 'Running',
  Finish = 'Finish',
  Waiting = 'Watting',
  IDeal = 'IDeal',
  Error = 'Error',
}

state: 可是是一个 atom 或者是一个 compute.

Example#

Root

The fallback content to display on prerendering

import React from 'react';
import {
  compute,
  RdxContext,
  useRdxStateLoader,
  Status,
  atom,
  useRdxValue,
  useRdxValueLoader,
  useRdxReset,
  useRdxRefresh,
  isLoading,
} from '@alife/rdx';
const pause = (t: number) => new Promise((resolve) => setTimeout(resolve, t));
const state = atom({
  id: 'atom',
  defaultValue: 10,
});
const asyncCompute = compute({
  id: 'asyncCompute',
  get: async ({ get }) => {
    await pause(2000);
    return get(state);
  },
});

export const Root = () => {
  return (
    <RdxContext>
      <Counter />
    </RdxContext>
  );
};
const Counter = () => {
  const state = useRdxValueLoader(asyncCompute);
  const reset = useRdxRefresh(asyncCompute);
  return (
    <div style={{}}>
      <div>{isLoading(state.status) ? '加载中...' : state.content}</div>
      <button
        onClick={() => {
          reset();
        }}
      >
        重置
      </button>
    </div>
  );
};