Cannot read property 'getState' of undefined error

Admin 1
Viewed 39474

  • I am trying to add the react sticky header to my stepper.

  • but the problem is if I add inside my App.js its not rendering.

  • so I started debugging the App.js code.
  • if I give console inside my render method of App.js its not displaying console.log("App---->");
  • right now I am getting Cannot read property 'getState' of undefined error
  • can you tell me how to fix it.
  • so that in future I will fix it myself.
  • providing my code snippet and sandbox below

https://codesandbox.io/s/6zv5n0ro9z

App.js

import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        <Sticky>
          {({
            style,

            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => <header style={style}>{/* ... */}</header>}
        </Sticky>
        {/* ... */}
      </StickyContainer>
    );
  }
}

index.js

import React from "react";
//import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { logger } from "redux-logger";
import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";
//import reducer from "./reducers";
import thunk from "redux-thunk";

//const store = createStore(reducer, applyMiddleware(thunk, logger));

//ReactDOM.render(<Demo />, document.querySelector("#root"));

render(
  //     <Provider store={store}>
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")
);
redux material-ui reactjs html javascript
7 Answers

You need to either pass a store to the Provider as Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Provider element entirely so you are just rendering the App element. The current stack trace shows that the error is in Provider.

You also need to add:

export default App;

to the bottom of App.js.

user_74959300

You need to pass your store as props to the wrapping Provider

render(<Provider store={store} >
          <App />
       </Provider>,document.getElementById("root"));
user_119225450

If you're going to render a React-Redux <Provider>, you must create a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.

user_629370

Chances are that you would have not set the store property correctly.

Make sure that store is imported this way.

import store from './store';

and not the below way

import {store} from './store';

<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

 import store from './store';

Running code should look like below

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';

ReactDOM.render(
  
    <Provider store={store}>
      <React.StrictMode> 
      <App />
      </React.StrictMode>
    </Provider>,

  document.getElementById('root')
);

 
serviceWorker.unregister();

enter code here
user_64592840

For anyone else stumbling on this, try to pull your <Provider> up a level and make use of your getters from a child.

user_1758250

Make sure you have imported import store from './redux/store' and pasing provider as <Provider store={store}> here I am emphasizing on `store' file and import must be small letter must not be camel or uppercase. This is what i have found during redux learning.

user_68183830 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';

ReactDOM.render(
  
    <Provider store={store}>
      <React.StrictMode> 
      <App />
      </React.StrictMode>
    </Provider>,

  document.getElementById('root')
);

 
serviceWorker.unregister();
user_172708890
Related