👻

Jotai は React と特に関係ないライブラリなので L チカもできる

に公開

タイトルは嘘です。React と関係あります。

しかしながら、React 依存部分と関係ないところは jotai/vanilla として分離されているので、React がなくても使えます。
この特徴は、React 以外の Vue などの他のフロントエンドで使えるだけでなく、ユニットテストやサーバーサイドでも活躍します。

ラズパイで L チカするコード

下のようなコードを書きました(一部抜粋)。
https://github.com/mitayuki3/jotai-led-blinker-example

import { atom, createStore } from "jotai/vanilla";

let led;
let blinkInterval = null;

const lampAtom = atom(false);
const toggleAtom = atom(null, (get, set) => {
  const prev = get(lampAtom);
  set(lampAtom, !prev);
});
const store = createStore();

// lampAtom の値を監視して LED 出力に反映する
store.sub(lampAtom, () => {
  const value = store.get(lampAtom);
  if (value) {
    led.on();
    console.log("LED: turn ON");
  } else {
    led.off();
    console.log("LED: turn OFF");
  }
});

async function blinkLED() {
  blinkInterval = setInterval(() => {
    store.set(toggleAtom);
  }, 500);
}

動き

  1. setIntervalstore.set する
  2. lampAtom の値が変わる
  3. lampAtom をサブスクライブするコールバックが呼ばれる
  4. コールバックで LED を ON/OFF する


光りました!

Discussion