Uncaught TypeError: Object(...) is not a function at connect

Question

我在 Udemy 上学习 React 课程，在 Redux 部分我遇到了这个错误Uncaught TypeError: Object(...) is not a function at connect。我试图谷歌它，但仍然没有找到解决方案。 有人可以帮我吗？非常感谢。

Counter.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import CounterControl from '../../components/CounterControl/CounterControl';
import CounterOutput from '../../components/CounterOutput/CounterOutput';

class Counter extends Component {
 state = {
     counter: 0
 }

counterChangedHandler = (action, value) => {
    switch (action) {
        case 'inc':
            this.setState((prevState) => { return { counter: prevState.counter + 1 } })
            break;
        case 'dec':
            this.setState((prevState) => { return { counter: prevState.counter - 1 } })
            break;
        case 'add':
            this.setState((prevState) => { return { counter: prevState.counter + value } })
            break;
        case 'sub':
            this.setState((prevState) => { return { counter: prevState.counter - value } })
            break;
    }
}

render() {
    return (
        <div>
            <CounterOutput value={this.props.ctr} />
            <CounterControl label="Increment" clicked={() => this.counterChangedHandler('inc')} />
            <CounterControl label="Decrement" clicked={() => this.counterChangedHandler('dec')} />
            <CounterControl label="Add 5" clicked={() => this.counterChangedHandler('add', 5)} />
            <CounterControl label="Subtract 5" clicked={() => this.counterChangedHandler('sub', 5)} />
        </div>
    );
 }
}

const mapStateToProps = state => {
   return {
       ctr: state.counter
   }
 };

export default connect(mapStateToProps)(Counter);

包.json

 {
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.2",
    "react-scripts": "1.0.13",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from './store/reducer';

const store = createStore(reducer);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();

reducer.js

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  return state;
};

export default reducer;

..................

Answer 1

我一直在学习相同的课程并面临相同的问题。最后都是关于 React、Redux 和 react-redux 库的版本。因为看起来课程不是最新的并且使用的是 16.0.0 版本的 React。 帮助我并使我的项目成功构建的一件事是使用来自redux--assignment-2-problem 项目的package.json 文件（这是课程第 14 节中给出的源代码的项目） 于是我复制了下面的package.json，粘贴到项目的根文件夹中：

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.13",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后我用那个包配置运行npm install，一切顺利。

Answer 2

在reducer.js 中导出之前，您可能需要调用combineReducers

import { combineReducers } from 'redux';
const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  return state;
};

export default combineReducers({counter: reducer});

counter.js 也需要更新：

const mapStateToProps = state => {
   return {
       ctr: state.counter.counter
   }
 };

此外，从设计的角度来看，将计数作为整数而不是对象存储在 reducer 中更有意义。