🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2325閲覧

next.js: APIを叩くときにエラーが発生してしまう

nanase21

総合スコア144

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/12/17 13:34

困っていること

app.jsuseDispatchを使おうとすると以下のようなエラーが起きてしまします。
app.js以外のページでは問題なく動くのですがapp.jsだけエラーが発生してしまっていて対処方法が分からず困っています。
エラー文的にはstoreがないよと言われているのですが、必ず毎回呼びたいAPIなのでapp.js内において毎回APIを叩かれるようにしたいのですが、何か対処方法があればご教示いただきたいです。

Server Error Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> This error happened while generating the page. Any console logs will be displayed in the terminal window.
import { Provider, useDispatch } from 'react-redux' import { useStore } from '../store' import { userAction } from '../duck/user/action' import axios from 'axios'; function App({ Component, pageProps }) { const store = useStore(pageProps.initialReduxState) const dispatch = useDispatch(); const setUser = async () => { const res = await axios.get( 'http://localhost:3000/user', { withCredentials: true } ) const data = res.data dispatch(userAction( { nickName: data.nickName } )) }; setUser() return ( <Provider store={store}> <Component {...pageProps} /> </Provider> ) } export default App;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

useDispatch<Provider> 内でなければいけません。しかしこの例では外で行われています。_app.js では store の注入のみ行い、dispatch は子のコンポーネント内で行いましょう。

投稿2020/12/17 16:28

A_kirisaki

総合スコア2853

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanase21

2020/12/21 07:58

返信遅くなりすいません。 ご教示いただいたことをいろいろ試してみてなんとか解決することが出来ました。 ご教示頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問