🎃
【zustand】特定の状態変化を監視して処理を実行する方法
subscribeWithSelectorに関数を渡すことでuseTodoStore.subscribeが使えるようになる
import { create } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
export const useTodoStore = create(
subscribeWithSelector((set) => ({
todos: [],
setTodos: (todos) => set({ todos }),
}))
);
// subscribeWithSelector ミドルウェアを使うと、subscribe の第一引数に「selector（特定の状態を取り出す関数）」を渡せるようになります。
useTodoStore.subscribe(
(state) => state.todos, // 👈 selector（監視対象を指定）
(todos, prevTodos) => { // 👈 listener（変化時の処理）
if (todos.length !== prevTodos.length) {
console.log("Todoが増減しました");
}
},
);
監視対象のtodosに追加、削除すると
logにTodoが増減しましたと表示されるようになる
上のコードでは、todos 配列の要素数が変わったタイミングでログを出力しています。
参考
最後に
これで状態変化時に何かしらの処理を実行できるようになりました
この仕組みを使えば、状態の変化に応じて「通知を出す」「データを保存する」など、柔軟な処理が可能です
zustandは色んな機能が備わっているのでもっと使い方を学びたいと思います
下記記事の内容と組み合わせるとリアルタイム通信が可能になりますよ！
Discussion