react-redux：在'connect'期间获取错误'dispatch不是一个函数'

Question

我是react-redux的新手，正在研究redux样本。我能够在浏览器上正确渲染视图。但是，当我尝试启动一个动作事件时，我收到以下错误消息：

  

调度不是功能

在浏览器的控制台中。

我无法弄清楚出了什么问题。我的所有源代码都在下面。

我怎样才能弄清楚出了什么问题？

index.js

const css = require('./assets/main.scss');
import {applyMiddleware, createStore} from 'redux';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import {Provider} from 'react-redux';
import {App} from './container/app';
import reducer from './reducer'

const store = createStore(reducer, 1);

const mountNode = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>, mountNode)

下的 容器/ app.js

import React from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as MathActions from "./../action/action";
import Calculator from "./../components/calc";

export const App = React.createClass({
    render: function() {
        const { value, dispatch } = this.props;   
        const actions = bindActionCreators(MathActions, dispatch);
        return (
            <Calculator actions={actions} value={value} />
        );
    }
});

export default connect(
    state => ({ value: state})
)(App);

在action / action.js下

import * as types from './actionConstant';

export function addOne() {
    return {
        type: types.ADD_ONE
    };
}

export function subtractOne() {
    return {
        type: types.SUBTRACT_ONE
    };
}

export function doubleValue() {
    return {
        type: types.DOUBLE_VALUE
    };
}

在action / actionConstant.js

下

export const ADD_ONE = "ADD_ONE";
export const SUBTRACT_ONE = "SUBTRACT_ONE";
export const DOUBLE_VALUE = "DOUBLE_VALUE";

在reducer / index.js下

import * as types from './../action/actionConstant';

export default function(state, action) {
    switch (action.type) {
        case types.ADD_ONE:
            return state + 1;
        case types.SUBTRACT_ONE:
            return state - 1;
        case types.DOUBLE_VALUE:
            return state * 2;
        default:
            return state;
    }
}

在components / calc.js下

import React from "react";

export default React.createClass({
    render: function() {
        const { actions } = this.props;
        return (
            <div className="calculator">
                <p>{this.props.value}</p>
                <button onClick={actions.addOne}>+1</button>
                <button onClick={actions.subtractOne}>-1</button>
                <button onClick={actions.doubleValue}>{String.fromCharCode(215)}2</button>
            </div>
        );
    }
});

我的package.json

中的依赖项

"dependencies": {
    "babel-runtime": "^6.26.0",
    "bootstrap": "^3.3.7",
    "prop-types": "^15.6.0",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-native": "^4.2.0",
    "redux": "^3.7.2",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.2.0"
}

Answer 1

我不确定connect是否提供dispatch作为React组件的属性，但无论如何，有更好的（并且默认为react-redux）方法将动作创建者映射到{{ 1}}：通过dispatch函数，需要作为第二个参数传递给mapDispatchToProps。

所以你的代码看起来像这样：

connect