[解決済み] Next.jsでReduxを使うのはアンチパターンか？

質問

Next.jsのアプリを作っているのですが、現在Reduxを使っています。構築しながら、Reduxの使用が本当に必要なのか、またその使用は実はアンチパターンなのではないかと考えています。以下は私の推論です。

Next.jsでReduxストアを適切に初期化するためには、カスタムな App コンポーネントに getInitialProps メソッドを使用します。このようにすることで 自動静的最適化 が提供するものです。

これに対して、クライアントサイドでAppをマウントした後にReduxを組み込むと、サーバーサイドのナビゲーションのたびにReduxストアがリセットされます。たとえば、クライアントサイドでReduxストアを初期化するNext.jsアプリがありますが、次のようなダイナミックルートにルーティングすると、Reduxストアはリセットされます。 pages/projects/[id] そのページはサーバーサイドでレンダリングされ、ストアにあった情報を再取得する必要があります。

私の疑問は

1. このような状況で、Reduxストアを利用するメリットは何でしょうか？
2. ルートでストアを初期化する必要があります App コンポーネントを使用し、自動静的最適化を見送ることができますか？
3. Next.js 9.3 で状態を管理するために、より良い方法はありますか？ getStaticProps と その他のデータ取得方法
4. 何か見逃していませんか？

解決方法は？

カスタムアプリでgetInitialPropsを使用している場合、自動的な Next.jsが提供する静的最適化はすべて無効になります。 ページがあります。

この方法に従えば、本当です。

もっといい方法はないのでしょうか？

はい、Redux Providerをラッパーとして作成し、必要なコンポーネントをラップすれば、reduxコンテキストは自動的に初期化され、そのコンポーネント内で提供されます。

例

const IndexPage = () => {
  // Implementation
  const dispatch = useDispatch()
  // ...
  // ...
  return <Something />;
}

IndexPage.getInitialProps = ({ reduxStore }) => {
  // Implementation
  const { dispatch } = reduxStore;
  // ...
  // ...
}

export default withRedux(IndexPage)

アプリ全体の最適化を無効にすることなく、状態管理が必要なページのみReduxを使用することができるようになりました。

ご質問の回答です。 Next.jsでReduxを使用することはアンチパターンでしょうか？ ということです。

いいえ、しかし適切に使用する必要があります。

詳細はこちらをご覧ください。 https://github.com/vercel/next.js/tree/canary/examples/with-redux

ご参考になれば幸いです。