TypeError: Cannot read property ‘getState’ of undefined

I want to try small redux example so I installed redux but I got this error

TypeError: Cannot read property ‘getState’ of undefined

new Provider webpack-internal:///./node_modules/react-redux/es/components/Provider.js:24:25

Code:

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import './index.css'; const App = () => (<div>Hi </div>); ReactDOM.render(<Provider><App /></Provider>, document.getElementById('root')); 

What is wrong ?

4 Answers

If we look inside react-redux <Provider />

<Provider /> expects to be provided a store prop:

this.state = { storeState: store.getState(), ^^here store } 

Hence the error.

You can create one, though, using a reducer, should be something similar to this:

import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducer' import App from './components/App' const store = createStore(reducer) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) 

You need to add a store to your provider.

If you don't have any reducer, you can add a dummy reducer.

Assume that the dummy reducer returns an empty array.

() => [] 

So, your code will be changed to:

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; const store = createStore(() => [], {}, applyMiddleware()); import './index.css'; const App = () => (<div>Hi </div>); ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root')); 

You can add dummy store so you can use your provider.

Provider needs store..

if you not add this u got error... TypeError: Cannot read property ‘getState’ of undefined

so add ..

const store = createStore(() => [], {}, applyMiddleware());

so u can use like this...

<Provider store={store}> <App /> </Provider> 

That's because you also need to pass the store as a parameter to the Provider object (as a value for the prop store), which wraps the App. You could do it this way:

At index.js:

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux'; import {Provider} from 'react-redux'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import reducer from "./store/reducer"; const store = createStore(reducer); ReactDOM.render( <Provider store={store}> <App/> </Provider>, document.getElementById('root') ); registerServiceWorker(); 

At reducer.js:

const initialState = { counter: 0 } const reducer = (state = initialState, action) => { return state; } export default reducer; 

Of course, then in the reducer you need to add whatever you want to be executed, depending of the type parameter inside of the action object, which is also passed as parameter into the reducer.

An example (at index.js):

const initialState = { counter: 0 } const reducer = (state = initialState, action) => { if (action.type === 'INC_COUNTER') { return { ...state, counter: state.counter + 1 }; } if (action.type === 'ADD_COUNTER') { return { ...state, counter: state.counter + action.value }; } } export default reducer;