Question

尝试将React组件连接到我的Redux状态，但是我收到了错误：

未捕获错误：期望reducer成为函数

不太确定我错在哪里：

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

然后在我的组件中，我使用connect将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);

任何提示都会令人难以置信：）

Answer 1

您正确使用applyMiddleware吗？

the docs将applyMiddleware传递给createStore函数，而不是相反。我也没有看到你在任何地方使用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>

未捕获错误：期望reducer成为函数

1 个答案: