React TrackedはContextだけじゃなくてReduxやZustandでも使えるんです

以前react-trackedの紹介と言う記事を書きましたが、その後少しバージョンアップしています。

v1.6.0からは、createTrackedSelectorと言うAPIが追加されReduxなどでも使えるようになりました。そもそもreact-trackedの前身はreactive-react-reduxと言うredux向けのライブラリなので技術的な目新しさはないのですが、react-trackedの位置付けとしてreact contextのためだけのライブラリではないと言うのは実は大きな変化です。

Zustandでも使えますが使い方は同じなのでReduxで説明します。ドキュメントサイトはこちら https://react-tracked.js.org/docs/tutorial-redux-01

使い方は簡単で、まずreact-reduxのuseSelectorをインポートします。

import { useSelector } from 'react-redux';

次に、react-trackedからcreateTrackedSelectorをインポートします。

import { createTrackedSelector } from 'react-tracked';

最後に、useTrackedSelectorを作ります。

const useTrackedSelector = createTrackedSelector(useSelector);

これにより、

const foo = useSelector(state => state.foo);

と書いていたところが、

const { foo } = useTrackedSelector();

と書けるようになります。ただ、これだとあまり嬉しさがわかりませんね。本領発揮するのは、reselectやequalityFnが必要になるケースです。

const selector = state => [state.foo, state.bar];
const [foo, bar] = useSelector(selector);

このように書くことはお勧めされていないというか、常にrenderされてしまいます。

const selector = state => [state.foo, state.bar];
const [foo, bar] = selector(useTrackedSelector());

でも、これは大丈夫です。React Trackedのstate usage trackingによって、使われたプロパティが変更された場合だけrenderするためです。

興味がありましたら、GitHubリポジトリやドキュメントサイトを覗いてみてください。

「React Fan」というコミュニティを立ち上げていて、そのSlackでもreact-trackedに関する議論や質問ができますので、よろしければご参加ください。

詳しくは、下記のページをご参照ください。

React開発者向けオンラインサロン「React Fan」の入り口ページ

Slackへの招待リンクも上記ページにあります。