Recoil

どういうライブラリなのはか他所をみてくれ。簡単にさわってみた。設計の要点としては、 atom の key がグローバルユニークなんで、

• src/states/session.ts
• src/states/posts.ts
• src/states/garbage.ts

みたいな感じで Recoil の states はディレクトリ上で一箇所にまとめるのがよいと思う。各ファイルは ducks のモジュール + α のようなイメージ。具体的には以下のような感じ(型はめんどいのでつけてない)。

garbage.ts

import { useSession } from './session';
import axios from 'axios';
import { atom, useRecoilState } from "recoil";

const garbagesState = atom({
  key: "garbages",
  default: [],
});

export const useGarbages = () => {
  const [garbages, setGarbages] = useRecoilState(garbagesState);
  const { session } = useSession();

  const fetchGarbages = async () => {
    const res = await axios.get(
      "https://example.com/api/v3/gomi_no_yama",
      { headers: { Authorization: `Bearer ${session.accessToken}` } }
    );
    setGarbages(res.data.garbages);
  };

  const updateGarbage = async (garbage) => {
    const res = await axios.post(
      `https://example.com/api/v3/gomi_no_yama/${garbage.id}, 
      garbage,
       { headers: { Authorization: `Bearer ${session.accessToken}` } }
    );
    const newArray = garbages.map(g => g.id === garbage.id ? res.data.garbage : g);
    setGarbages(newArray);     
  };

  return { garbages, fetchGarbages, updateGarbage };
};

状態の管理と API アクセスを redux で無理するよりもはるかに綺麗に React Hooks の形でカプセル化することができる。これは非常に革命的だと思う。