TypeError: Object(…) is not a function; when attempting to create a redux store

Question

I'm trying to integrate Redux into my React app and to create a store but i run into an error:

I import Provider in my app.js file and import the file below correctly...

store.js



import { createStore, applyMiddleware, compose } from 'react'
import rootReducer from './reducers'
import thunk from 'redux-thunk'

const initialState = {}

const middleware = [thunk]

const store = createStore(
    rootReducer, 
    initialState, 
    compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);


export default store

app.js


import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import AppNavbar from './components/AppNavbar'
import ShoppingList from './components/ShoppingList'
import { Provider } from 'react-redux'
import store from './store'

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <AppNavbar />
        <ShoppingList />
      </div>  
    </Provider>

  );
}

export default App;

reducers/index.js

import { combineReducers } from 'redux'
import itemReducer from './itemReducer'

export default combineReducers({
    item: itemReducer
})

dance2die dance2die · Accepted Answer · 2019-07-29T15:05:27

The methods you imported from store.js are from Redux package, not from react.

Refer to an example on Redux page.
https://redux.js.org/api/compose#example

You should import createStore, applyMiddleware, compose as shown below.

import { createStore, applyMiddleware, compose } from 'redux'

TypeError: Object(…) is not a function; when attempting to create a redux store

2 Answers