useReducer useContext で管理したステートを変更しても、再度レンダリングされない

Question

実現したいこと

• Reducerのdispach関数を叩いた時に、値を変更する
• 現状画面更新した時のみ値が反映されるが、リアルタイムで反映させる

発生している問題・分からないこと

Reducerのstateとdispachを呼び出せるカスタムhookを作り、そのhookを介してstate（カードの情報）の中身をmapで展開している。
しかし、dispachでstateに対して 追加 削除 編集 のようなアクションを実施しても、変更した結果が反映されない。
画面更新すると反映される。

エラーメッセージ

window is not defined
ローカルストレージに値を保存しており、関連するエラーが出ていますが 今回の不具合とは直接関係ないものと推測しています。

該当のソースコード

// カードの情報のstateと 情報変更用のdispatch を返す hooks
export const useCards = () => {
  const strageCards = getLocalStrage("cards");
  const defaultCards: Card[] = strageCards ? strageCards : [];
  const [cards, cardsDispatch] = useReducer(cardsReducer, defaultCards);

  return { cards, cardsDispatch };
};

// カード情報をmapで展開している
export default function Home() {
  const { cards } = useCards();

  return (
    <div className="flex w-full flex-wrap gap-2">
      {cards &&
        cards.map((card) => (
          <React.Fragment key={card.id}>
            <Card id={card.id}>{card.text}</Card>
          </React.Fragment>
        ))}
    </div>
  );
}

// カードコンポーネント
// コンポーネントからカードの削除ができるが、ここで削除してもリアルタイムでデータが反映されない
function Card({ id, children }: { id: number; children: string }) {
  const [isEdit, setIsEdit] = useState<boolean>(false);
  const { cardsDispatch } = useCards();

  return (
    <div className="h-[200px] w-[200px] bg-yellow-200 p-2">
      <div>{id}</div>
      <div className="h-[139px] w-[168px] text-xs text-black">
        {isEdit ? (
          <textarea
            autoFocus={true}
            onBlur={(e) => {
              setIsEdit(false);
              cardsDispatch({
                type: "UPDATE",
                payload: {
                  id: id,
                  text: e.target.value,
                },
              });
            }}
          />
        ) : (
          <div onClick={() => setIsEdit(true)}>{children}</div>
        )}
      </div>
      <button
        onClick={() =>
          cardsDispatch({
            type: "DELETE",
            payload: {
              id: Number(id),
            },
          })
        }
      >
        <Delete />
      </button>
    </div>
  );
}

export default Card;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

• 検索
  • 状態管理フレームワークを使った事例は出てきましたが、useReducer useContext を使った不具合事例が見つかりませんでした。

補足

よろしくお願いいたします。

Comments

[退会済みユーザー]

コメント削除しま〜す😇

Answer 1

ぱっと見、Home と Card の両方で useCards() してしまっているのが怪しいです。なので

• Home でだけ useCards() し、cards と cardsDispatch の両方を受け取っておく。

- const { cards } = useCards();
+ const { cards, cardsDispatch } = useCards();

• このcardsDispatch を Card に prop 経由で渡す。
• Card では useCards()しないで、propで渡されてきた cardsDispatch を使う。

といった修正をすれば、問題のすべてが解決するかは分かりませんがなにがしか前進するような気がします。

Comments

[sasa0330]

コメントありがとうございます！ご指摘のとおりでした！

> propで渡されてきた cardsDispatch
コンポーネントの中でDispatchを呼び出すのではなく、hundleHogeHoge のような関数Propsを用意してDispatchを渡してあげるのが正しそうでした。
ご回答ありがとうございました！

[退会済みユーザー]

> hundleHogeHoge のような関数Propsを用意して

あ〜そうですね。そうするのが、子コンポーネントの間口を狭くするという意味でもより丁寧かと思います。