React Redux -> TypeError: Object(...) is not a function

Question

So I'm learning react and I've split my code into seperate files which are, as follows ->ReduxDemo.js/reducers.js/store.js/actions.js Here is their content:

ReduxDemo.js:

import React from 'react'
import {useSelector} from 'react-redux'
function ReduxDemo(){
    const cakeAmount = useSelector(state=>state.cakeCount)      
     return(
        <div>
            <div>
                <h1>Amount of cakes - {cakeAmount}</h1>
            </div>
        </div>)
    }
export default ReduxDemo;

reducers.js:

import {combineReducers} from 'redux'

const cakeState=
{
    cakeCount: 10,
}
const iceCreamState=
{
    iceCreamCount: 20
}

const cakeReducer=(state={cakeState},action)=>
        {
            
            switch(action.type)
            {
                case 'buyCake':
                    return{
                        ...state, 
                        cakeCount: state.cakeCount -1
                    }
                default:
                    return state
            }
            
        }
const iceCreamReducer=(state=iceCreamState, action)=>
        {
            switch(action.type)
            {
                case 'buyIceCream':
                    return{
                        ...state, 
                        iceCreamCount: state.iceCreamCount-1
                    }
                default: 
                    return state;
            }
        }

const reducers = combineReducers(
            {
                cake: cakeReducer,
                iceCream: iceCreamReducer
            })

export default reducers;

store.js:

import reducers from './reducers'
import {createStore} from 'react'

const store = createStore(reducers)
store.subscribe(()=>
{
    console.log('store changed:', store.getState())
})
export default store;

actions.js:

import store from './store'
export const buyCake=()=>
        {
            store.dispatch({type: 'buyCake'})
        }

    

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReduxDemo from './ReduxDemo'
import {Provider} from 'react-redux'
import store from './store'
function App() {

  return (
    <div>
        <Provider store={store}>
          <ReduxDemo></ReduxDemo>
        </Provider>
    </div>
  );
}

export default App;

for some obscure to me reason I get "TypeError: Object(...) is not a function", that is supposedly located at this line in store.js -> const store = createStore(reducers) Why is that and how can I fix it?

Answer 1

createStore is not a function offered by React. You need to import it from Redux:

// store.js
import { createStore } from 'redux'