Matt Matt - 1 month ago 44
Javascript Question

React+Redux - Uncaught Error: Actions may not have an undefined "type" property

I tried to create a simple react-redux-ajax working example, following Reddit API tutorial, but I get this error:

Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?


The error is thrown by:

dispatch(fetchProducts(this.props));
in App.jsx

index.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';

import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';

const loggerMiddleware = createLogger();

function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
DevTools.instrument(),
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),

// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
}

const store = configureStore();

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);

Answer

You just forgot to compose your enhancers, the third argument to createStore must be a function so you need to compose all your enhancers to provide a unique enhancer :

index.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';

import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';

const loggerMiddleware = createLogger();

function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        compose(
            applyMiddleware(
                thunkMiddleware,
                loggerMiddleware
            ),
            DevTools.instrument(),
            persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
        )
    )
}

const store = configureStore();

ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>, document.getElementsByClassName('products')[0]);

Redux DevTool doc

Comments