Next.jsにreact-reduxを使ってGoogle認証機能を実装したい

Question

前提・実現したいこと

React(Next.js),TypeScript,Firebaseでタイマーアプリを作っています。
ログイン画面でGoogle認証機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

npm run devで実行

ターミナル出力

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (C:\Users\sekai\pomodoro-clock\node_modules\react-redux\lib\hooks\useReduxContext.js:30:11)
    at useSelector (C:\Users\sekai\pomodoro-clock\node_modules\react-redux\lib\hooks\useSelector.js:133:28)
    at Home (C:\Users\sekai\pomodoro-clock.next\server\pages\index.js:447:72)
    at processChild (C:\Users\sekai\pomodoro-clock\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
    at resolve (C:\Users\sekai\pomodoro-clock\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\sekai\pomodoro-clock\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\sekai\pomodoro-clock\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\sekai\pomodoro-clock\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)        
    at Object.renderPage (C:\Users\sekai\pomodoro-clock\node_modules\next\dist\next-server\server\render.js:54:854)
    at Function.getInitialProps (C:\Users\sekai\pomodoro-clock.next\server\vendors-node_modules_next_dist_pages__document_js.js:627:19)

ローカルホストのサーバーエラー

該当のソースコード

import * as React from 'react';
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import firebase from 'util/firebase';
import CategoryList from 'components/CategoryList';
import Header from 'components/Header';
import Calendar from 'components/Calendar';
import { useSelector, useDispatch } from 'react-redux';
import { selectUser, login, logout } from 'features/userSlice';
import { auth } from '../../lib/db';
import Auth from 'components/Auth';

//ApexCharts読み込むのにNext.jsで必要な設定
const DynamicGraphComponentWithNoSSR = dynamic(() => import('../views/Graph/Graph'), { ssr: false });

const Home: React.FC = (props) => {
  const [categories, setCategories] = useState([]);
  //HomeComponentからredux/userを取得してローカルのuserに渡す
  const user = useSelector(selectUser);
  //login, logoutアクションを送信(dispatch)する
  const dispatch = useDispatch();

  useEffect(() => {
    //firebaseのauth管理下のuser.stateに変化があれば毎回呼び出す
    const unSub = auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(
          //useSlice.loginをdispatch
          login({
            uid: authUser.uid,
            photoUrl: authUser.photoURL,
            displayName: authUser.displayName,
          }),
        );
      } else {
        //useSlice.logoutをdispatch
        dispatch(logout());
      }
    });
    return () => {
      unSub();
    };
  }, [dispatch]);

  useEffect(() => {
    async function fetchData() {
      const userId = '12345678'; //テストId
      await Promise.all([getUser(userId), getCategories(userId)]);
    }
    fetchData();
  }, []);

  const getUser = async (userId: any) => {
    try {
      const user = await firebase.getUserData(userId);
    } catch (e) {
      console.error(e);
    }
  };

  const getCategories = async (userId: any) => {
    try {
      const categories = await firebase.getCategories(userId);
      setCategories(categories);
    } catch (e) {
      console.error(e);
    }
  };

  //{user.uid ? (ユーザが存在する時の処理) :(ユーザが存在しない時の処理)}
  return (
    <>
      
      <Header title="タイマー" />
      <div className="content">
        <div style={{ marginBottom: 40 }}>
          <p className="title">カテゴリー</p>
          <CategoryList categories={categories} />
        </div>
        <div style={{ marginBottom: 40 }}>
          <p className="title">作業時間</p>
          <React.StrictMode>
            <DynamicGraphComponentWithNoSSR />
          </React.StrictMode>
        </div>
        <div style={{ marginBottom: 40 }}>
          <p className="title">カレンダー</p>
          <Calendar />
        </div>
      </div>

      <Auth />
      
    </>
  );
};

export default Home;

store

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

action

export const userSlice = createSlice({
  name: 'user',
  initialState:{
    user: {uid:"", displayName: ""},
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = {uid:"", displayName: ""};
    },
    //USER型のオブジェクトをreact componentからdispatchする際に受け取る
    updateUserProfile: (state, action: PayloadAction<USER>)  => {
      //payload/displayNameをRedux/userステート/displayName属性に更新
      state.user.displayName = action.payload.displayName;
      state.user.photoUrl = action.payload.photoUrl;
    },
  },
});

試したこと

エラー内容から、Provider内にコンポーネントを格納する必要があるとのことですが、
具体的な手順が不明で手が付けられないです。

ソリューションリスト

• https://stackoverflow.com/questions/60329421/usedispatch-error-could-not-find-react-redux-context-value-please-ensure-the
• https://qiita.com/r_1105/items/ddcb1ac56df13a0c77ca
• https://github.com/reduxjs/react-redux/issues/1489
• https://www.codegrepper.com/code-examples/javascript/could+not+find+react-redux+context+value%3B+please+ensure+the+component+is+wrapped+in+a+%3CProvider%3E+testing
• http://5.9.10.113/66164315/react-enzyme-test-could-not-find-react-redux-context-value-please-ensure-the-c
• https://www.fixes.pub/program/786985.html

補足情報（FW/ツールのバージョンなど）

"react-redux": "version": "7.2.4",
"react-dom": "version": "17.0.2",

Comments

[p19ljk]

storeやactionは作成されていますよね？
なにか根本的にreduxに関して勘違いしているような気がしますが。。。

[nekonekonekko]

store,actionは作成しておりますが、
見様見真似でやっている部分はありますね。

単純にNext.jsで作成中のアプリに認証機能を加える目的だったのですが、
少し面倒な手順を踏んでしまっているようです。

[p19ljk]

作成してあるのですね！
では後はreduxのProviderコンポーネントでwrapして、Providerのpropsのstoreに作成してあるストアを渡せば使えるようになると思います。

[nekonekonekko]

ありがとうございます！
試してみますm(__)m

[nekonekonekko]

↓回答ありがとうございます。
必要モジュールのインポート、reduxのProviderコンポーネントでwrapを行いましたが、
変わらず同じエラーが出ている状況です。

```
import { Provider } from 'react-redux';
import store from 'app/store';

return (
<>
<Provider store={store}>
<Auth />
</Provider>
</>
);
};
```

<Auth />はサインイン画面の内容で、Google認証でログインする際に
reduxを利用する想定です。何か不可解な点等ありますでしょうか？

```
const Auth:React.FC = () => {
const classes = useStyles();
const signInGoogle = async () => {
await auth.signInWithPopup(provider).catch((err) => alert(err.message));
}

....
```

[p19ljk]

useSelectorに渡しているselectUserはどのような内容になっていますか？
useSelectorは「reduxのstateを受け取って取得したいstate値を返す関数」を渡すのですが。

[nekonekonekko]

あっているかわかりませんがこの内容です

```
export const { login, logout, updateUserProfile } = userSlice.actions;

export const selectUser = (state: RootState) => state.user.user;

export default userSlice.reducer;
```

[p19ljk]

今ひとつ気になったのですが、useSelector等redux機能を利用しているのはAuthではなくHomeですよね？
であればHomeをProviderで囲わなければ利用できません。
要するにProviderの子コンポーネントでreduxが利用できるという感じです。
今だとAuth内で利用する形になっています。

[nekonekonekko]

すみません。
お時間を割いていただき申し訳ないのですが、時間的に間に合いそうにないためreduxを使わず
シンプルなfirebase auth構成で認証機能を実装しました。
以下の記事を参考にしました。
`https://zenn.dev/k_logic24/articles/react-auth-with-firebase`

その後、少々不具合はありますが別の質問で投稿する予定です。
この度はご対応頂きありがとうございました。

Answer 1

こんな感じでreduxが利用できます。
構造は例です。

import { Provider } from 'react-redux'
import Store from './redux/store // これに関しては自作しているstoreのパス

return (
  <Provider store={Store}>
    <App /> // ここはreduxを利用したいコンポーネント(一番rootのコンポーネントで良いかと)
  </Provider>
)