Блог

Итак, я изучаю react и разделил свой код на отдельные файлы, которые выглядят следующим образом ->ReduxDemo.js/reducers.js/store.js/actions.js Вот их содержание:

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;
  

по какой-то неясной для меня причине я получаю «Ошибка типа: объект (…) не является функцией», которая предположительно находится в этой строке в store.js -> const store = createStore(reducers) Почему это так и как я могу это исправить?

createStore это не функция, предлагаемая React. Вам нужно импортировать его из Redux:

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