React store.getState is not a function

Question

Here is my code:

store.js

import {createStore, applyMiddleware, compose} from 'redux';
import {fromJS} from 'immutable';
import {routerMiddleware} from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(initialState = {}, history) {
    // Create the store with two middlewares
    // 1. sagaMiddleware: Makes redux-sagas work
    // 2. routerMiddleware: Syncs the location/URL path to the state
    const middlewares = [sagaMiddleware, routerMiddleware(history)];

    const enhancers = [applyMiddleware(...middlewares)];

    const store = createStore(createReducer, fromJS(initialState), enhancers);

    // Extensions
    store.runSaga = sagaMiddleware.run;
    store.asyncReducers = {}; // Async reducer registry

    return store;
}

Routes.js

import React from 'react';
import {Route, Router, IndexRoute, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import store from './store';

import Welcome from './containers/Welcome';

const history = syncHistoryWithStore(browserHistory, store);

const routes = (
    <Router history={history}>
        <Route path="/">
              <IndexRoute component={Welcome} />
        </Route>
    </Router>
);

export default routes;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';


const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
    <Provider store={store}>
        {routes}
    </Provider>, document.getElementById('main-content')
);

I can't find where the culprit is. I tried to debug it, but can't found what really make it those error. error: Uncaught TypeError: store.getState is not a function

Any solution?

Hama

Is there a reason enhancers is an array? Also you need to initialize your store in the routes file. – Leffler

Answer 1

This is a typo that generated the error: TypeError: store.getState is not a function

Wrong

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

Correct

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

Notice the added parenthesis () on applyMiddleware.

Thickset

Waaoo, thanks @Thickset and Matt This has solved my error and saved me a lot of head banging! God bless you guys :) – Idolater

Answer 2

In my case i got this error because my store was a function, as shown below:

const store = preloadedState => {
    let initialState={}
    //some code to modify intialState
   
    return createStore(reducer, initialState)
}

but in index.js i was passing store as a function instead of the value it was returning.

wrong

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

correct

<Provider store={store()}>
    <MyApp />
</Provider>

Courteous

Answer 3

Notice that in your Routes.js the store is not being initialized properly. You should add these lines:

  const initialState = {};
  const store = configureStore(initialState, browserHistory);

as in your index.js file.

Mental

Answer 4

I was doing this (a dynamic require) ..

    const store = require('../store/app')
    state = store.getState()

but for some reason when using require instead of import you have to do this ..

    const store = require('../store/app')
    state = store.default.getState()

Casaubon

thanks for this! would be interested to understand why though, if anyone has an explanation i am interested! – Manvil

I think const store = require('../store/app').default is better ... then just use state as normal - definitely related to use of require, since I've seen this a few times when using require – Casaubon

makes perfect sense indeed. Just to confirm what you said, I have just tried using import and it works. Thanks for your help – Manvil

Answer 5

Not sure if this will help but you named your import { Providers } instead of { Provider } from react-redux library.

Numbersnumbfish

Answer 6

In index.js we have to provide store() method as props value instead of store.

<Provider store={store()}>
   {routes}
</Provider>

Updated index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';


const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
    <Provider store={store()}>
        {routes}
    </Provider>, document.getElementById('main-content')
);

Excurvature

Answer 7

this is the solution, good luck 🤞

import { applyMiddleware, combineReducers, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk'

const reducer = combineReducers({
    products: []
})

const middleware = [thunk]

const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store

Farias

Answer 8

TypeError: store.getState is not a function -This error often occurs when you are not properly initializing middleware function. What you need to do is as below

You need to add paranthesis on applyMiddleware ( ) function and then it will behave as you are expecting it to do.

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

Positively

Answer 9

Replacing store with store() worked for me. Written below:

<Provider store={store()}>
   {routes}
</Provider>

Evesham