Redux-devtools: uncaught TypeError: reducer is not a function

[lcxfs1991]

I am getting this error:

configureStore.dev.js =>

import { createStore, compose, applyMiddleware } from 'redux';
import { Router, Route, browserHistory } from 'react-router';
import { syncHistory, routeReducer } from 'redux-simple-router';
import rootReducer from '../reducers/reducers';
import thunk from 'redux-thunk';
import { persistState } from 'redux-devtools';
import DevTools from '../container/DevTools';
import logger from '../../common/middleware/logger';
import api from '../../common/middleware/api';

const finalCreateStore = compose(
    applyMiddleware(thunk, api, logger, syncHistory(browserHistory)),
    DevTools.instrument(),
    persistState(getDebugSessionKey())
)(createStore);

function getDebugSessionKey() {
    // You can write custom logic here!
    // By default we try to read the key from ?debug_session=<key> in the address bar
    const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/);
    return (matches && matches.length > 0) ? matches[1] : null;
}

export default function configureStore(initialState) {

    const store = finalCreateStore(rootReducer, initialState);

    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers/reducers', () => {
            const nextRootReducer = require('../reducers/reducers');
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

reducers.js =>

import { combineReducers } from 'redux';
import { routeReducer as routing } from 'redux-simple-router'
import objectAssign from 'object-assign';
import initialState from '../../common/stores/stores';
import { GET_USER_HW_LIST_SUCCESS, GET_USER_HW_LIST_ON, GET_USER_HW_LIST_ERROR } from '../actions/actions';

var blogList = function(state = initialState.blogList, action) {
    switch(action.type) {
        case GET_USER_HW_LIST_SUCCESS:
            return action.list;
            break;
        case GET_USER_HW_LIST_ERROR:
            return action.list;
            break;
        default:
            return state;
            break;
    }
};

const rootReducer = combineReducers({
    routing,
    blogList
});

export default rootReducer;

DevTools.js =>

import React from 'react';

// Exported from redux-devtools
import { createDevTools } from 'redux-devtools';

// Monitors are separate packages, and you can make a custom one
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

// createDevTools takes a monitor and produces a DevTools component
const DevTools = createDevTools(
  // Monitors are individually adjustable with props.
  // Consult their repositories to learn about those props.
  // Here, we put LogMonitor inside a DockMonitor.
    <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q'>
        <LogMonitor theme='tomorrow' />
    </DockMonitor>
);

export default DevTools;

functions in Instrument that has this error:

/**
 * Computes the next entry in the log by applying an action.
 */
function computeNextEntry(reducer, action, state, error) {
  if (error) {
    return {
      state: state,
      error: 'Interrupted by an error up the chain'
    };
  }

  var nextState = state;
  var nextError = undefined;
  try {
    nextState = reducer(state, action);
  } catch (err) {
    nextError = err.toString();
    if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && typeof window.chrome !== 'undefined') {
      // In Chrome, rethrowing provides better source map support
      setTimeout(function () {
        throw err;
      });
    } else {
      console.error(err.stack || err);
    }
  }

  return {
    state: nextState,
    error: nextError
  };
}

[gaearon]

My best bet is that you are using Babel 6, and you need to change your require to explicitly grab .default because Babel 6 no longer tries to interop with CommonJS.

        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers/reducers', () => {
            const nextRootReducer = require('../reducers/reducers').default; // <-- I added .default here
            store.replaceReducer(nextRootReducer);
        });

[lcxfs1991]

Bingo! Thank you so much!

[gertig]

@gaearon @lcxfs1991 I just ran across the same issue. .default was the ticket. Thanks!

[ImTheKindJoaco]

My best bet is that you are using Babel 6, and you need to change your require to explicitly grab .default because Babel 6 no longer tries to interop with CommonJS.

        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers/reducers', () => {
            const nextRootReducer = require('../reducers/reducers').default; // <-- I added .default here
            store.replaceReducer(nextRootReducer);
        });

Hey sorry for this because I know this is will be probably a really dumb question but where do I have to change this? I'm having the same issue while learning react and I am stuck with this issue. Again sorry and Thanks in advance

[Methuselah96]

@ImTheKindJoaco Can you share some code of how you're setting up your Redux store?

[ImTheKindJoaco]

@Methuselah96 Pretty sure I'm not using Redux this is my code

GithubState.js

import React, { useReducer } from "react";
import axios from "axios";
import GithubContext from "./githubContext";
import GithubReducer from "./githubReducer";
import {
SEARCH_USER,
SET_LOADING,
CLEAR_SEARCH,
GET_ONE_USER,
GET_USER_REPOS,
SEARCH_USERS,
} from "../types";

const GithubState = (props) => {
const initialState = {
users: [],
user: {},
repos: [],
loading: false,
};

const [state, dispatch] = useReducer(GithubContext, GithubReducer);

// Search users
const searchUsers = async (user) => {
setLoading();

const res = await axios.get(
  `https://api.github.com/search/users?q=${user}&client_id=${process.env.GITHUB_FINDER_GITHUB_CLIENT_ID}&client_secret=${process.env.GITHUB_FINDER_GITHUB_CLIENT_SECRET}`
);

dispatch({
  type: SEARCH_USERS,
  payload: res.data.items,
});
};
const setLoading = () => dispatch({ type: SET_LOADING });

return (
<GithubContext.Provider
value={{
users: state.users,
user: state.user,
repos: state.repos,
loading: state.loading,
searchUsers,
}}
>
{props.children}
</GithubContext.Provider>
);
};

export default GithubState;

githubReducer.js

import {
SEARCH_USER,
SET_LOADING,
CLEAR_SEARCH,
GET_ONE_USER,
GET_USER_REPOS,
SEARCH_USERS,
} from "../types";

const githubReducer = (state, action) => {
switch (action.type) {
case SEARCH_USERS:
return {
...state,
users: action.payload,
loading: false,
};
case SET_LOADING:
return {
...state,
loading: true,
};

default:
  return state;
}
};

export default githubReducer;

Search.js

import React, { useState, useContext } from "react";
import PropTypes from "prop-types";
import {} from "module";
import GithubContext from "../../context/github/githubContext";

const Search = ({ setAlert, showClearBtn, clearSearch }) => {
const githubContext = useContext(GithubContext);

const [userInput, setUserInput] = useState("");

const onSubmit = (e) => {
if (userInput === "") {
e.preventDefault();
setAlert("Please enter a user", "secondary");
} else {
e.preventDefault();
githubContext.searchUsers(userInput);
setUserInput({ userInput: "" });
}
};

const onChange = (e) => setUserInput(e.target.value);

return (




  {showClearBtn && (
    <button onClick={clearSearch} className="btn btn-secondary btn-block">
      Clear Search Results
    </button>
  )}
</div>
);
};

Search.propTypes = {
showClearBtn: PropTypes.bool.isRequired,
clearSearch: PropTypes.func.isRequired,
};

export default Search;

I hope this is useful, thanks a lot for the interest in helping, I appreciate it a lot!

[Methuselah96]

@ImTheKindJoaco And can you post your exact error message?

[ImTheKindJoaco]

@Methuselah96

[Methuselah96]

@ImTheKindJoaco It looks like you're using useReducer incorrectly based on the docs. I'm not sure what GithubContext is, but GithubReducer should be the first argument passed into useReducer.

[ImTheKindJoaco]

@Methuselah96 It was just that, I needed to pass GithubReducer first, you are awesome, thanks a lot now I can keep on coding.

Again, thanks for the help, you kind stranger^^