Atom

Atom 持有应用的实际状态。可以通过 Atom 来进行组件间的状态的共享。

通过atom进行组件间状态的共享#

通过atom()方法来建立一个状态节点，状态节点需要一个唯一的id，并且可以设置一个默认值。

const ColorAtom = atom({
  id: 'color',
  defaultValue: 'white',
});

通过 useRdxValue 这个hooks可以获取到ColorAtom中的状态。

const Canvas = () => {
  const color = useRdxValue(ColorAtom);
  return (
    <div>
      <div style={{ position: 'relative' }}>
        <div
          style={{
            width: 435,
            height: 435,
            background: color,
            border: '1px solid grey',
          }}
        />
        <div style={{ position: 'absolute', top: 10, left: 10 }}>
          <ThemeEditor />
        </div>
      </div>
    </div>
  );
};

通过useRdxSetter 这个hooks 可以获取到一个setter方法，可以设置ColorAtom的状态。

const ThemeEditor = () => {
  const setColor = useRdxSetter(ColorAtom);
  const dataSource = ['#fff', '#000'];
  return (
    <div>
      <div style={{ display: 'flex' }}>
        {dataSource.map((item) => (
          <div
            onClick={() => {
              setColor(item);
            }}
            style={{
              marginLeft: 12,
              border: '1px solid grey',
              background: item,
              width: 32,
              height: 32,
              borderRadius: '50%',
            }}
          ></div>
        ))}
      </div>
      <div style={{ color: 'orange' }}>点击我可以切换画布颜色哦!!</div>
    </div>
  );
};

通过 useRdxState 可以同时获取到ColorAtom节点的状态和setter(设置器)。

const ColorEditor = () => {
  const [color, setColor] = useRdxState(ColorAtom);
  return (
    <SketchPicker
      color={color}
      onChange={(v) => {
        const { a, r, g, b } = v.rgb;
        setColor(`rgba(${r},${g},${b},${a}`);
      }}
    />
  );
};

Sample#

AtomBgControlSample

The fallback content to display on prerendering

import React from 'react';
import {
  atom,
  RdxContext,
  useRdxSetter,
  useRdxState,
  useRdxValue,
} from '@alife/rdx';
import { SketchPicker } from 'react-color';
const ColorAtom = atom({
  id: 'color',
  defaultValue: 'white',
});

export const AtomBgControlSample = () => {
  return (
    <RdxContext>
      <div>点击像devtools发送消息</div>
      <div style={{ display: 'flex' }}>
        <Canvas />
        <ColorEditor />
      </div>
    </RdxContext>
  );
};

const Canvas = () => {
  const color = useRdxValue(ColorAtom);
  return (
    <div>
      <div style={{ position: 'relative' }}>
        <div
          style={{
            width: 435,
            height: 435,
            background: color,
            border: '1px solid grey',
          }}
        />
        <div style={{ position: 'absolute', top: 10, left: 10 }}>
          <ThemeEditor />
        </div>
      </div>
    </div>
  );
};
const ThemeEditor = () => {
  const setColor = useRdxSetter(ColorAtom);
  const dataSource = ['#fff', '#000'];
  return (
    <div>
      <div style={{ display: 'flex' }}>
        {dataSource.map((item) => (
          <div
            key={item}
            onClick={() => {
              setColor(item);
            }}
            style={{
              marginLeft: 12,
              border: '1px solid grey',
              background: item,
              width: 32,
              height: 32,
              borderRadius: '50%',
            }}
          ></div>
        ))}
      </div>
      <div style={{ color: 'orange' }}>点击我可以切换画布颜色哦!!</div>
    </div>
  );
};

const ColorEditor = () => {
  const [color, setColor] = useRdxState(ColorAtom);
  return (
    <SketchPicker
      color={color}
      onChange={(v) => {
        const { a, r, g, b } = v.rgb;
        setColor(`rgba(${r},${g},${b},${a}`);
      }}
    />
  );
};