はじめに

Reactで開発するにあたり

• ちょっと試しに開発したいとき、useStateが増えてくるとめんどくさい
• Reduxのような状態管理のライブラリを使うほど本格的ではない
• setStateで{…state, count: state.count + 1} みたいなスプレッド構文がめんどくさい

「もっと手軽に書けないかな？」と思って作ったのが use-immer-observable です。
こんな感じで使えます

const [state, proxy] = useImmerObservable({
  user: { name: "Guest" },
  count: 0
  items:[1,2,3]
});

// 更新するときは普通に代入するだけ
proxy.set.count = 1;
proxy.set.user.name = "Alice";

// 配列の場合はこれまで通りスプレッド構文で
proxy.set.items = [...proxy.set.items, newItem];

スプレッド構文を書かなくてもいいuse-iummerというライブラリもあるのですが、下記の用にupdate句を使わないといけないのでこれも少し面倒だと思いました

  update(draft => {
    draft.user.isLoggedIn = true;
  });

 

仕組み

内部では、stateを useState で管理し、useRef で proxy オブジェクトを保持しています。
このproxyはProxyでラップされており、proxy.set で値を変更すると、その変更を検知して、内部で Immer を使ってstateをイミュータブルに更新します。

 

使い方

インストール

npm install use-immer-observable
# または
yarn add use-immer-observable

使用例

import useImmerObservable from 'use-immer-observable';

function Counter() {
  // state, proxy は任意の名前に変更可能です
  const [state, proxy] = useImmerObservable({ count: 0 });

  return (
    ＜div＞
      ＜p>Count: {state.count}＜/p＞
      ＜button ｏnClick={() => proxy.set.count++}>+1＜/button＞
    ＜/div＞
  );
}

 

注意点

• SetやMapはサポートしていません
• 配列の操作は push や splice ではなく、スプレッド構文で新しい配列を作って代入してください
• 大きなプロジェクトではパフォーマンスに注意が必要かもしれません

 

最後に

シンプルな実装ですが、その分使いやすいと思います。ぜひ試してみてください！

GitHubリポジトリ と npm で公開しています。