Next.js 13 エラーを修正: React-redux コンテキストがありません; <Provider> 内でコンポーネントをラップしてください

Question

redux からのデータを使用したいのですが、このエラーを解決できません。そこで、next.js 13 にアプリケーションルーターがあり、/settings/account の自分のページにアクセスしたいと考えています。これは私のファイル構造です:

--アプリ
     - 設定
      レイアウト.jsx
      ページ.jsx
        - アカウント
         ページ.jsx
         layout.jsx

アカウント ページのユーザー データにアクセスしたい:

「react」から React をインポート
import { useSelector } から 'react-redux';

デフォルト関数 AccountPage() をエクスポート {
    const {info: userInfo} = useSelector(state => state.user);
    const {名前、id} = ユーザー情報;
    console.log(名前, ID)

  戻る （
    <div>ページ</div>
  )
}

しかし、エラーが発生しました:エラー: 反応 Redux コンテキスト値が見つかりませんでした。コンポーネントがプロバイダーでラップされていることを確認してください。レイアウトを使用してページをラップすれば問題は解決すると思い、次のようにしました。

layout.jsx
「クライアントを使用する」
import { ストア } から "@/context/store";
import { Provider } から「react-redux」;

デフォルト関数のエクスポート AccountLayout({ Children }) {
    戻る （
        <プロバイダストア={ストア}>
            {子供たち}
        </プロバイダー>
    )
  }

残念ながら、これは役に立ちません。設定/アカウント ページと設定ページのレイアウトは同じですが、SettingsLayout という名前が異なるだけです (ルート レイアウトでこの問題は解決すると思いました)。設定ページに関しては、プレーンな HTML のみが含まれており、コードは含まれていません。 App コンポーネントをラップせずにこの問題を解決するにはどうすればよいですか?

Answer 1

これはテスト済みの方法です;

redux-provider.js という名前の新しいファイルをアプリケーション フォルダーに追加します。 リーリー

provider.tsx という名前の別のファイルをアプリケーション フォルダーに追加し、ReduxProvider を実装します。 リーリー

layout.tsx ファイルにプロバイダーを実装します

(アプリケーション フォルダーの直接のサブコンポーネント) リーリー

これで、他のページからストアにアクセスできるようになりました。

更新

＃＃＃はい。しかし！ルート コンポーネントを ReduxProvider でラップしても、他のすべてのコンポーネントがクライアント コンポーネントになるわけではありません。サーバー コンポーネントは引き続き使用できます。どうやってするの？

experiment という名前の新しいフォルダーをアプリケーション フォルダーの下に追加し、その下に page.tsx という名前の新しいファイルを追加します。 page.tsx ファイルの内容を別のファイルからインポートできます。

/実験/page.tsx

リーリー