CODEWITHSUNDEEP
reactjsreduxredux-thunk
user2418670
user2418670

Reputation:

Redux createStore/applyMiddleWare Q

I am new with Redux and followed a tutorial on implementing redux in react. I'm having an issue that seems to be no value is being received in app.js from store.js's createStore function. Any ideas?

app.js

import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import ShoppingList from './components/ShoppingList';
import ItemModal from './components/ItemModal';
import { Container } from 'reactstrap';

import { Provider } from 'react-redux';
import store from './store';

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component {
  render() {
      return (
         <Provider store={store}>
           <div className="App">
            <AppNavbar />
            <Container>
            <ItemModal />
            <ShoppingList />
          </Container>
        </div>
      </Provider>
    );
  }
}

export default App;

store.js

 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';

 const initialState = {};

 const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
compose(
  applyMiddleware(thunk)
  )
);

export default store;

reducers folder itemReducer.js - Just showing GET_ITEMS case

import {
  GET_ITEMS,
  ADD_ITEM,
  DELETE_ITEM,
  ITEMS_LOADING
} from '../actions/types';

const initialState = {
  items: [],
  loading: false
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_ITEMS:
      return {
        ...state,
        items: action.payload,
        loading: false
      };

index.js

import { combineReducers } from 'redux';
import itemReducer from './itemReducer';

export default combineReducers({
  item: itemReducer
});

Error:

TypeError: Cannot read property 'apply' of undefined (anonymous function) C://client/node_modules/redux/es/redux.js:523

  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(undefined, arguments));
    };
  });
}

createStore C://client/node_modules/redux/es/redux.js:87

 throw new Error('Expected the enhancer to be a function.');
 }

 return enhancer(createStore)(reducer, preloadedState);
}

if (typeof reducer !== 'function') {

./src/store.js C://client/src/store.js:9

const middleware = [thunk];

const store = createStore(
rootReducer,
initialState,
compose(

Upvotes: 1

Views: 2165

Answers (1)

cachiama
cachiama

Reputation: 590

That error is related to the Redux DevTools Chrome extension integration which enables you to view the Redux store visually in the browser. Installing Redux DevTools extension should do the trick. If you do not wish to use the extension, you can simply omit the following code to remove the integration with the extension:

, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Upvotes: 0

Related Questions