1

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?

1 Answer 1

3

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

// store.js
import { createStore } from 'redux'
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much ! I will accept your answer once stackoverflow lets me(in about 5 minutes)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.