React + Redux：未捕获的错误：期望减速器是一个函数答案

【问题标题】：React + Redux: Uncaught Error: Expected the reducer to be a functionReact + Redux：未捕获的错误：期望减速器是一个函数
【发布时间】：2017-03-13 07:23:12
【问题描述】：

我收到一条错误消息，但我不知道如何解决它：

Uncaught Error: Expected the reducer to be a function

以下是我的 react/redux 工作流程的各个部分：

根减速器

import { combineReducers } from 'redux';
import PostsReducer from './reducer_posts';
import StreakReducer from './reducer_streak';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  entries: PostsReducer,
  form: formReducer,
  streak: StreakReducer
});

export default rootReducer;

动作创建者

import axios from 'axios';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export const FETCH_ENTRIES = 'FETCH_ENTRIES';
export const FETCH_LONGEST = 'FETCH_LONGEST';

const ROOT_URL = 'http://localhost:3000/entries';

export function fetchEntries() {
  const request = axios.get(`${ROOT_URL}`);
  return {
    type: FETCH_ENTRIES,
    payload: request
  };
}


// action creator for returning the longest streak of rejections
export function longestStreak() {
  return function(dispatch) {
    return fetchEntries().then(
      entries => dispatch(findLongestStreak(entries))
    );
  };
}


function findLongestStreak(entries) {
  var longestStreakLength = 10;
  return {
    type: FETCH_LONGEST,
    payload: longestStreakLength
  };
}

条纹减少器

import { FETCH_LONGEST } from '../actions/index';

const INITIAL_STATE = { streak: 0 };

export default function(state = INITIAL_STATE, action) {
  switch(action.type) {
    case FETCH_LONGEST:
      return { ...state, streakInfo: action.payload.data};
    default:
      return state;
  }
}

帖子缩减器

import { FETCH_ENTRIES, CREATE_ENTRY } from '../actions/index';

const INITIAL_STATE = { all: [], entry: null };

export default function(state = INITIAL_STATE, action) {
  switch(action.type) {
    case CREATE_ENTRY:
      return {...state, entry: action.payload.data };
    case FETCH_ENTRIES:
      return { ...state, all: action.payload.data };
    default:
      return state;
  }
}

组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { longestStreak } from '../actions/index';


class EntriesMetadata extends Component {
  componentWillMount() {
    this.props.longestStreak();
  }

  render() {
    return (
        <div>
      </div>
    );
    }
  }

function mapStateToProps(state) {
  return { streak: state.streak.streakInfo };
}

export default connect(mapStateToProps, { longestStreak })(EntriesMetadata);

我不知道如何解决这个问题。谁能指出我正确的方向？这是我的第一个 redux 项目！如果需要任何额外的 sn-ps，请告诉我。

编辑

这是我的 github 仓库：https://github.com/pchung39/courage

【问题讨论】：

你能显示两个reducer的代码吗？
请同时发布其他减速器的代码。如果您可以分享github链接，您可能会得到更快的答案。
@HazardouS 我在我的原始帖子上发布了这个项目的 github 链接。

标签： javascript reactjs redux redux-thunk

【解决方案1】：

请尝试如下：为你的 reducer 函数添加名称：

export default function PostsReducer(state = INITIAL_STATE, action) {
  switch(action.type) {
    case CREATE_ENTRY

：对 StreakReducer 执行相同的操作。我检查了我自己的项目，这是我和你的解决方案之间的唯一区别。

【讨论】：

javascript 控制台仍然显示“未捕获的错误：预期减速器是一个函数”。我已经发布了这个项目的 github 存储库作为对我帖子的编辑，以防你想查看整个源代码。

【解决方案2】：

您需要修复actions/index.js 中的代码。它目前重新导入减速器，然后尝试创建不应该存在的商店。当两个 reducer 都导入这个文件时，它们最终会触发循环依赖。

清理完操作代码后，您需要修复其他代码错误。

【讨论】：

【解决方案3】：

我不明白您为什么要在您的操作中创建商店，您已经在 index.js 中这样做了，对吧？

如果您从操作文件中注释掉商店代码，它应该可以正常工作。看起来像一个循环依赖。

使用更改在您的存储库上创建了一个 PR。检查一次。

如果您遇到任何问题，请告诉我。这是 PR link

【讨论】：

我尝试了您建议的更改，控制台显示src\actions\index.js 中的return fetchEntries().then 未被识别为有效功能？我是否也需要手动将 redux-promise 导入到我的应用中？
您的服务器是否在 3000 端口上运行？

【解决方案4】：

您忘记了 mapDispatchToProps。您应该使用 mapDispatchToProps 传递您的操作，然后可以从道具访问它（this.props.actions.longestStreak()）

const mapDispatchToProps = (dispatch) =>({
    actions: bindActionCreators(longestStreak, dispatch)
});

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

【讨论】：

谢谢@Ruslan，我会试一试，让你知道！