2016-05-25 7 views
0

Der Versuch, bis Haken ein Reagieren Komponente zu meinem Redux Zustand, aber ich bin immer die Fehlermeldung:nicht erfasste Fehler: Erwartet die Minderer eine Funktion

Uncaught Error: Expected the reducer to be a function

Nicht ganz sicher, wo ich falsch gehe:

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')); 

Mein rootReducer:

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

import expenditure from './expenditure'; 

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

export default rootReducer; 

Und mein 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 
    } 
}; 

Dann in meiner Komponente, ich bin in der Redux Zustand als Requisiten mit den folgenden unterhalb der Ausgaben zu ziehen mit Verbindung reagieren Klasse:

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

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

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

Irgendwelche Tipps wäre unglaublich sein :)

Antwort

2

verwendest du applyMiddleware richtig?

the docs haben es vorbei applyMiddleware zu der createStore Funktion, nicht andersherum. ich nicht auch sehen Sie Ihre rootReducer überall an allen

mit versuchen

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 

, um etwas zu ändern, wie

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

dann Ihren Router Eingang

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

Dank Phil ändern, aber das gibt mir den Fehler "Uncaught TypeError: createStoreWithMiddleware ist keine Funktion" –

+0

, weil es keine Funktion ist und die nächste Zeile, die Sie versuchen, ein Argument in Ihrem Provider zu übergeben, wenn Sie nur das "createStoreWithMiddleware" -Objekt übergeben müssen – PhilVarg

+0

Kann nicht herausfinden, was ich tun muss:/Vielen Dank für Ihre Hilfe Kumpel, ich werde morgen nochmal darüber reden, könnte dann mehr Sinn machen! –

Verwandte Themen