2016-05-25 2 views
0

Попытка подключить Реагировать компонент к моему государству Redux, но я получаю сообщение об ошибке:Uncaught Ошибка: Ожидаемый редуктор быть функцией

Uncaught Error: Expected the reducer to be a function

Не совсем уверен, где я неправильно:

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

Мой rootReducer:

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

import expenditure from './expenditure'; 

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

export default rootReducer; 

И мои 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 
    } 
}; 

Тогда в моем компоненте, я использую подключения тянуть в состоянии Redux в качестве реквизита со следующим ниже расходов реагируют класс:

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

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

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

Любые советы будут невероятно :)

ответ

2

вы правильно используете applyMiddleware?

the docs у него есть applyMiddlewarecreateStore функция, а не наоборот. я также не вижу, вы используете ваш rootReducer где-нибудь на всех

попробуйте изменить

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 

к чему-то вроде

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

затем измените входной маршрутизатор для

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

Спасибо Фил, но что дает мне ошибку 'Uncaught TypeError: createStoreWithMiddleware не является функцией' –

+0

, потому что это не функция и следующая строка вниз, вы пытаетесь передать ей аргумент в своем провайдере, когда вам просто нужно передать объект 'createStoreWithMiddleware'. – PhilVarg

+0

Не могу решить, что мне нужно сделать:/Спасибо за вашу помощь приятель, я завтра перейду к этому завтра, может быть больше смысла! –

Смежные вопросы