动作必须是普通对象。使用自定义中间件进行异步操作。解决此问题

时间:2017-12-06 05:31:33

标签: node.js reactjs

在我的react redux应用程序错误中(未捕获错误:操作必须是普通对象。使用自定义中间件进行异步操作。)显示运行此应用程序的所有重要事项都已成功安装因此,不需要担心它谷歌它好几次但没有任何事情发生任何人都有想法解决这个问题,你的努力将在这种情况下受到赞赏,并提前感谢

这是我的行动index.js

export function CounterActions(){
    return {
        type: "Add"
    }
}

这是我的reducer counterApp.js

    const initialState = {
        counter: 0
    }

    function counterApp(state, action) {
        if (typeof state === "undefined"){
            return initialState;
        }

        switch (action.type) {
            case "Add":
                return Object.assign( {}, state, { counter: state.counter + 1 } );
            default:
                return state;
        }
    }

export default counterApp;

这是我的商店store.js

import { createStore } from 'redux';

import counterApp from './reducers/counterApp';

let store  = createStore(counterApp);

export default store;

这是我的组件app.jsx

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

    class App extends Component{
        constructor(props){
            super(props);
        }
        click(){
            this.props.testClick();
        }

        render(){
            return(
                <div>
                    <h1>React Redux</h1>
                    <h2>Counter: {this.props.counter}</h2>
                    <button onClick={this.click.bind(this)}>Count ++ </button>
                </div>
            )
        }
    }

    const mapDispatchToProps = (dispatch) => {
        return {
            testClick: () => dispatch(CounterActions("Add"))
        }
    }

    const mapStateToProps = (state) => {
        return state;
    }

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

2 个答案:

答案 0 :(得分:1)

将参数传递给connect的顺序不正确。颠倒参数的顺序,它应该没问题。

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

connect的语法如下:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

答案 1 :(得分:0)

尝试一下:

export function CounterActions(){
    return ({
      type: "Add"
    })
}

您需要将返回对象放在括号中。如果不这样做,那么肯定会出现此错误。

enter image description here

希望有帮助!

相关问题