title: Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(CharacterList)
body: <p>I am trying to test my React "supersquadapp" and getting the following error.</p>
  
  <p>Uncaught Error: Could not find "store" in either the context or props of "Connect(CharacterList)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(CharacterList)".</p>
  
  <p>characterlist.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  class CharacterList extends Component {
      render() {
          console.log('this.props', this.props);
          return (
              &lt;div&gt;
                  &lt;h4&gt;characters&lt;/h4&gt;
              &lt;/div&gt;
          )
      }
  
  }
  function mapStateToProps(state) {
      return {
          characters: state.characters
      }
  }
  
  export default connect(mapStateToProps, null)(CharacterList);
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import CharacterList from './CharacterList';
  
  class App extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;h2&gt;SUPER SQUAD&lt;/h2&gt;
                  &lt;CharacterList /&gt;
              &lt;/div&gt;
          )
      }
  } 
  export default App;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './Components/App';
  
  import { createStore } from 'redux';
  import { Provider } from 'react-redux';
  
  import rootReducers from './reducers';
  import { addCharacterById } from './actions';
  
  
  const store = createStore(rootReducers);
  console.log(store.getState());
  store.subscribe(() =&gt; console.log('store',store.getState()))
  store.dispatch(addCharacterById(3));
  
  ReactDOM.render(
      &lt;Provider&gt;
          &lt;App /&gt;
       &lt;/Provider&gt;
      ,document.getElementById('root')
  )
  </code></pre>
  
  <p>character.js(in reducers folder)</p>
  
  <pre><code>import characters_json from '../Data/characters.json';
  import { ADD_CHARACTER } from '../actions';
  
  function characters(state = characters_json, action) {
      switch(action.type) {
          case ADD_CHARACTER:
          let characters = state.filter(item =&gt; item.id !== action.id);
          return characters;
          default:
              return state;
      }
  }
  export default characters;
  </code></pre>
  
  <p>heroes.js(reducers folder)</p>
  
  <pre><code>import { ADD_CHARACTER } from '../actions';
  import {createCharacter} from './helper';
  
  function heroes(state = [], action) {
      switch(action.type) {
          case ADD_CHARACTER:
          let heroes = [...state, createCharacter(action.id)];
          return heroes;
          default:
          return state;
      }
  }
  export default heroes;
  </code></pre>
  
  <p>helper.js(reducers folder)</p>
  
  <pre><code>import characters_json from '../Data/characters.json';
  
  export function createCharacter(id) {
      let character = characters_json.find(c =&gt; c.id === id);
      return character;
  }
  </code></pre>
  
  <p>index.js(reducers folder)</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import characters from './characters_reducer';
  import heroes from './heroes_reducer';
  
  
  const rootReducer = combineReducers({
      characters,
      heroes
  })
  export default rootReducer;
  </code></pre>
  
  <p>index.js(action folder)</p>
  
  <pre><code>export const ADD_CHARACTER = 'ADD_CHARACTER';
  
  export function addCharacterById(id) {
      const action = {
          type:ADD_CHARACTER,
          id
      }
      return action;
  }
  </code></pre>
  
  <p>The above error occurred in the  component:</p>
  
  <p>in Connect(CharacterList) (at App.js:9)</p>
  
  <p>in div (at App.js:7)</p>
  
  <p>in App (at index.js:19)</p>
  
  <p>in Provider (at index.js:18)</p>
  
  <p>please help me...?</p>