Redux createStore/applyMiddleWare Q

Question

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(

what tutorial are you reading? where did you see that example of using createstore with the nested compose and applymidddlware the way you have it? — azium
youtube.com/playlist?list=PLillGF-RfqbbiTGgA77tGO426V3hRF9iE His completed code is downloadable in the description — matt
Edited question to include my itemReducer.js file (only GET_ITEMS action) Also included index.js file that imports ./itemReducer — matt
did you catch your error yet? (hint: you never use middleware anywhere) — azium

cachiama cachiama · Accepted Answer · 2018-12-11T10:53:16

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__()

Redux createStore/applyMiddleWare Q

1 Answers