useRdxState(state)

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

function useRdxState<GModel>(state: RdxState<GModel>): [GModel, TNext<GModel>];
type TNext<GModel> = (value: GModel | ((oldValue: GModel) => GModel)) => void;

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

这个 API 和 React 的 useState() 非常相似。它返回了一个状态和设置方法的元组。你可以通过传递新的值或者是一个更新方法来使用它。

Example#

Root

The fallback content to display on prerendering

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

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

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