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?