CODEWITHSUNDEEP
javascriptreactjsredux
Le Moi
Le Moi

Reputation: 1025

Uncaught Error: Expected the reducer to be a function

Trying to hook up a React component to my Redux state, but I am getting the error:

Uncaught Error: Expected the reducer to be a function

Not quite sure where I am going wrong:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import store, { history } from './store'; 

// Import components
import App from './components/App';
import Expenditure from './components/Expenditure';
import Income from './components/Income';
import Transactions from './components/Transactions';
import Single from './components/Single';

// import css
import css from './styles/style.styl';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

const router = (
  <Provider store={createStoreWithMiddleware(store)}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Expenditure} />
        <Route path="/income" component={Income} />
        <Route path="/expenditure" component={Expenditure} />
        <Route path="/transactions" component={Transactions} />
        <Route path="/expenditure/:id" component={Single} />
        <Route path="/income/:id" component={Single} />
        <Route path="/transaction/:id" component={Single} />
      </Route>
    </Router>

  </Provider>
);

render(router, document.getElementById('root'));

My rootReducer:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import expenditure from './expenditure';

const rootReducer = combineReducers({
  expenditure,
  routing: routerReducer
});

export default rootReducer;

And my actionCreators.js:

import axios from 'axios';

export const FETCH_EXPENDITURE = 'FETCH_EXPENDITURE';

export function fetchExpenditure() {
    const request = axios.get('/api/expenditure');

  return {
    type: FETCH_EXPENDITURE,
        payload: request 
    }
};

Then in my component, I am using connect to pull in the Redux state as props with the following below the Expenditure react class:

function mapStateToProps(state) {
  console.log('state');
  return { 
    expenditure: state.expenditure.all 
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Expenditure);

Any tips would be incredible :)

Upvotes: 0

Views: 2625

Answers (1)

PhilVarg
PhilVarg

Reputation: 4820

are you using applyMiddleware correctly?

the docs have it passing applyMiddleware to the createStore function, not the other way around. i also dont see you using your rootReducer anywhere at all

try changing

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

to something like

// import rootReducer from '/path/to/rootReducer.js';
const createStoreWithMiddleware = createStore(
  rootReducer,
  [ ... ], //=> initial state
  applyMiddleware(ReduxPromise)
)

then change your router input to

<Provider store={createStoreWithMiddleware}>
  ...
</Provider>

Upvotes: 2

Related Questions