Реакция JS действия не работает

Question

Я новичок, чтобы отреагировать на js и попробовал небольшой кусочек кода

import  * as template_actions from '../actions/actions'
class EmailTemplateList extends Component {
    constructor(props){
        super(props);
    }

    render(){
        console.log(this.props.template_actions.add_template({'name': 'Ramesh'}))
        return (<div>
            Welcome
        </div>);
    }

}

function mapDispatchToProps(dispatch){
    return {
        template_actions: bindActionCreators(template_actions, dispatch)
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(EmailTemplateList)

actions.js

export const ADD_EMAIL_TEMPLATE     = 'ADD_EMAIL_TEMPLATE';
export function add_template(payload){
    return dispatch => {
        dispatch({
            payload: payload,
            type: ADD_EMAIL_TEMPLATE
        });
    }
}

Но ошибка

Actions must be plain objects. Use custom middleware for async actions

Не удалось найти решение.

Answer 1

import  * as template_actions from '../actions/actions'
class EmailTemplateList extends Component {
    constructor(props){
        super(props);
    }

    render(){
        console.log(this.props.add_template({'name': 'Ramesh'}))
        return (<div>
            Welcome
        </div>);
    }

}

function mapDispatchToProps(dispatch){
    return {
        add_template: payload => dispatch(template_actions.add_template(payload))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(EmailTemplateList)

действия

export const ADD_EMAIL_TEMPLATE     = 'ADD_EMAIL_TEMPLATE';
export function add_template(payload){
    return ({
            payload: payload,
            type: ADD_EMAIL_TEMPLATE
        })
}

Answer 2

Я решил эту проблему, используя промежуточное программное обеспечение redux-thunk.

Answer 3

Вы можете попробовать что-то вроде этого:

return (dispatch) => {
    dispatch({
        payload: payload,
        type: ADD_EMAIL_TEMPLATE
    });
}