Uncaught TypeError: (0 , _reactRedux.combineReducers) is not a function

7
votes

I have started with react was experimenting something. but I am continuously getting error sating that "Uncaught TypeError: (0 , _reactRedux.combineReducers) is not a function" here is my demo configuration file

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'

import createLogger from 'redux-logger'
import thunk from 'redux-thunk'

import App from './containers/App'
import promise from "redux-promise-middleware"
import logger from "redux-logger"

import reducer from "./reducers"

const middleware = applyMiddleware(promise(), thunk, logger())
const store= createStore(reducer,middleware)
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

this index.js of reducers import { combineReducers } from "react-redux" import users from "./UserReducer"

export default combineReducers({
    users,

    }
)

User reducer.js

export default function reducer(state={users:[]},action){
   // console.log("inside reducer")
   switch(action.type){
       case "FETCH_USERS":{
           console.log("inside reducer",{...state})
           return {...state,users:action.payload}
       }
   } 
}
3
reactjsreact-redux

3 Answers

18
votes

combineReducers is provided by the 'redux' package, not 'react-redux'.

So: import { combineReducers } from 'redux' should fix it

1
votes

How about change this

export default combineReducers({
   users,

   }
)

To this

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

const someApp = combineReducers({
  users
})

export default someApp

And import it in app.js or index.js where you put your route. Just like this.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import someApp from './reducers'
import App from './components/App'

let store = createStore(someApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
0
votes

I had this same problem today but it was working fine before. I was importing combineReducers from 'redux'.

I had just changed the separate reducer functions to use createReducer from '@reduxjs/toolkit' and after that it broke. Changing the code back still did not work so it could be related to adding in extra types for TypeScript.

Strangely, I was able to fix this by importing combineReducers from '@reduxjs/toolkit' instead.