■開発環境
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にアクセスできません。
解決策、ご教授頂ければと思います。
あなたの回答
tips
プレビュー