useRdxValue(state)

会根据当前参数的 RdxState 来返回相应的数据，并且这个 hooks 将会订阅这个 RdxState 值的变化。

function useRdxValue<GModel>(state: RdxValue<GModel>): GModel;

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

Example#

Root

The fallback content to display on prerendering

import React from 'react';
import { atom, useRdxState, RdxContext, useRdxValue } from '@alife/rdx';

const Atom = atom({
  id: 'atom',
  defaultValue: 1,
});

export const Root = () => {
  return (
    <RdxContext>
      <Counter />
      <Preview />
    </RdxContext>
  );
};
const Preview = () => {
  const state = useRdxValue(Atom);
  return (
    <div>
      <strong>Preview:</strong>
      {state}
    </div>
  );
};
const Counter = () => {
  const [state, setState] = useRdxState(Atom);
  return (
    <div style={{ display: 'flex', width: 200 }}>
      <strong>Operate: </strong>
      {/* 通过传递新的值来更新数据 */}
      <button
        onClick={() => {
          setState(state + 1);
        }}
      >
        +
      </button>
      <span>{state}</span>
      {/* 通过传递updated function 来更新数据 */}
      <button
        onClick={() => {
          setState((state) => {
            return state - 1;
          });
        }}
      >
        -
      </button>
    </div>
  );
};