質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
Redux

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

Next.js

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

React.js

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

Q&A

0回答

323閲覧

【NEXT.js/Redux】storeがpropsとしてコンポーネントに渡らない

tara43

総合スコア4

Redux

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

Next.js

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

React.js

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

0グッド

0クリップ

投稿2020/10/09 09:59

編集2020/10/09 09:59

■開発環境
React/Next.js/Redux

■実現したいこと
Reduxを用いて、stateを管理し、各コンポーネントから更新したい

■現状(困っていること)
_app.jsにてstoreの宣言などを行い、各コンポーネントへpropsにstoreを含ませているつもりだが、各コンポーネントでpropsが受け取れていない

// _app.js import '../styles/globals.css' import 'bootstrap/dist/css/bootstrap.min.css' import { Provider } from 'react-redux' import { createStore } from 'redux' const reducer = (state = { text: "initValueText" }, action) => { switch (action.type) { case "CHANGE_TEXT": return Object.assign({}, state, { text: action.text }); default: return state; } } export const store = createStore(reducer); function MyApp({ Component, pageProps }) { console.log(store); // 中身が確認できる let test01 = store.getState(); console.log(test01); // 中身が確認できる return ( <Provider store={store}> <Component {...pageProps} /> </Provider> ) } export default MyApp

_app.js内では、storeの中身はコンソールに出力すると確認できるのですが、
storeが各コンポーネントへ渡っていないため、各コンポーネントからstoreにアクセスできません。

解決策、ご教授頂ければと思います。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問