title: Redux | Error: Expected the reducer to be a function
body: <p>I'm trying to use Redux, Redux-Thunk in my app. I did it before and it worked but here it keeps showing Error: Expected the reducer to be a function</p>
  
  <p>scr/App.js;</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Router } from 'react-router-dom';
  import { createBrowserHistory } from 'history';
  import { Chart } from 'react-chartjs-2';
  import { ThemeProvider } from '@material-ui/styles';
  import { chartjs } from './helpers';
  import theme from './theme';
  import 'react-perfect-scrollbar/dist/css/styles.css';
  import './assets/scss/index.scss';
  import Routes from './Routes';
  import { Provider } from 'react-redux';
  
  // redux
  import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
  import thunk from 'redux-thunk';
  import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
  import * as actionTypes from './store/actions/actionTypes';
  import rootReducer from './store/reducers/rootReducer';
  
  const browserHistory = createBrowserHistory();
  
  Chart.helpers.extend(Chart.elements.Rectangle.prototype, {
    draw: chartjs.draw
  });
  
  const store = createStore(
    rootReducer,
    compose(applyMiddleware(thunk), composeWithDevTools)
  );
  
  export default class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;Router history={browserHistory}&gt;
              &lt;Routes /&gt;
            &lt;/Router&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>when I tried to log <strong>rootReducer</strong> it logged an empty line for the initial load then the app breaks then it logs the <strong>rootReducer</strong> </p>
  
  <p>src/store/rootReducer.js</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import searchReducer from './searchReducer';
  
  const rootReducer = combineReducers({
    searchReducer: searchReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>src/store/reducers/searchReducer.js</p>
  
  <pre><code>import * as actionTypes from '../actions/actionTypes';
  
  const initialState = {
    loading: false,
    result: [],
    error: ''
  };
  
  const searchReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case actionTypes.SEARCH_TRIGGER:
        return {
          ...state,
          loading: true,
          result: [],
          error: ''
        };
      case actionTypes.SEARCH_ERROR:
        return {
          ...state,
          loading: false,
          result: [],
          error: action.error
        };
      case actionTypes.SEARCH_SUCCESS:
        return {
          ...state,
          loading: false,
          error: '',
          result: action.result
        };
      default:
        return state;
    }
  };
  
  export default searchReducer;
  </code></pre>
  
  <p>src/store/actions/actionTypes.js</p>
  
  <pre><code>// create campaign actions
  export const UPDATE_STEPPER_STATE = 'UPDATE_STEPPER_STATE';
  export const SEARCH_TRIGGER = 'SEARCH_TRIGGER';
  export const SEARCH_SUCCESS = 'SEARCH_SUCCESS';
  export const SEARCH_ERROR = 'SEARCH_ERROR';
  </code></pre>
  
  <p>src/store/actions/stepperActions.js</p>
  
  <pre><code>import * as actionTypes from './actionTypes';
  
  export const updateStepperState = data =&gt; {
    return {
      action: actionTypes.UPDATE_STEPPER_STATE,
      data
    };
  };
  </code></pre>
  
  <p>exported in index.js inside the same directory </p>
  
  <pre><code>export { updateStepperState } from './stepperActions';
  </code></pre>
  
  <p>packages</p>
  
  <pre><code>"react-redux": "^7.1.3",
  "redux": "^4.0.4",
  "redux-devtools-extension": "^2.13.8",
  "redux-thunk": "^2.3.0",
  "thunk": "0.0.1",
  </code></pre>