React Reduxのエラー解消方法について

Question

React Reduxのエラー解消方法について

React Reduxを勉強始めたばかりです。
https://reffect.co.jp/react/react-redux-for-beginner
↑こちらの「2.6 connect関数の利用」を試したところエラーが出て解消しません。ソースを丸々コピペしても下記エラーメッセージが出ます。

エラーメッセージ

Error: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(App) in connect options.

エラーの出てるソースコードおよび開発環境を下記しますが、何かが足りないのでしょうか？

Storeのソースコード

import { createStore } from "redux";

const initialState = {
  title: "Redux Store",
  count: 50,
};

const reducer = (state = initialState) => {
  return state;
};

const store = createStore(reducer);

export default store;

Appのソースコード

import React from "react";
import "./App.css";
import { connect } from "react-redux";

function App({ count }) {
  return (
    <div className="App">
      <h1>Redux Learn</h1>
      <p>Count: {count}</p>
    </div>
  );
}

const mapStateToProps = (state) => {
  return { count: state.count };
};

export default connect(mapStateToProps)(App);

開発環境

    "react": "^17.0.2",
    "react-redux": "^7.2.6",

Answer 1

おそらくindex.jsに対しての、以下の説明にそった修正をしていないのでは？と思いましたがいかがでしょう？

Providerコンポーネント
https://reffect.co.jp/react/react-redux-for-beginner#Provider

Comments

[megane-taro]

ご連絡遅れました。
ご回答ありがとうございました。

よくよく見ると参考サイトに掲載されている「connect関数の利用（https://reffect.co.jp/react/react-redux-for-beginner#connect）」のINDEX.jsはINDEX.jsではなくApp.jsの内容みたいですね。
それで勘違いしてしまいました。
（コードをよく見返せば気づけたものかもしれません）

またconnect関数は子コンポーネントに値を渡す役割であって、親で使用するものではないのですね。