2016-05-01 4 views
2

Ich habe versucht, ein einfaches reagieren-redux-Ajax-Arbeitsbeispiel zu erstellen, folgenden Reddit API tutorial, aber ich habe diesen Fehler:Reagieren + Redux - nicht erfasste Fehler: Aktionen nicht eine undefinierte Eigenschaft „type“ haben

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

der Fehler wird durch geworfen:

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]); 
+1

Bitte versuchen Sie Ihre bereitgestellten Code unten auf Bereiche zu verengen, die Sie denken, sind relevant - es ist schwierig, Lesen Sie eine ganze App in einer Frage durch. In Bezug auf Ihr Problem sieht es so aus, als würden Sie redux-thunk als benannten Import importieren, wenn es sich um einen Standardimport handelt, z. 'importiere thunkMiddleware von 'redux-thunk''. –

+0

@ShaneCavaliere danke für die Antwort. Ich habe meine Frage bearbeitet und versucht, den Code in meiner Frage zu reduzieren (ich bin neu in redux). Ich habe 'thunkMiddleware' als Standardimport geändert, aber es hat nicht geholfen. – Matt

+1

Middleware muss das dritte Argument für 'createStore' sein, nicht das 4. - in der Dokumentation:' createStore (Reducer, [initialState], [Enhancer]) '- Entfernen Sie die Dev-Tools-Injection. – lux

Antwort

3

Sie haben vergessen, nur Ihre Enhancer zu komponieren, muss das dritte Argument createStore eine Funktion sein, so dass Sie alle Ihre compose Enhancer brauchen eine einzigartige zu bieten 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

Verwandte Themen