我们可以在类中定义的redux Action Creators上使用bindActionCreators（）吗？

Question

I have defined Redux action creators inside a class in the following manner:

export class ActionCreator {

    login() {
        return { type: 'LOGIN_STATUS' };
    }

    fbLoginStatusOK(user) {
        return { type: 'LOGIN_OK', user };
    }
}

Then inside a React components I am using them like this:

class Login extends React.Component {

    login(e) {
        e.preventDefault();
        a = new ActionCreator(); // Simplified
        dispatch(a.login());
    };

    render() {
        return (
            <div>
                <h1>Login</h1>
                <p>
                    <a href="#" onClick={this.login}>Login</a>
                </p>
            </div>
        );
    }
}

How can I use bindActionCreators on the ' ActionCreator ' class or its object?

(So that every action creator is wrapped into a dispatch call so they may be invoked directly)

Answer 1

bindActionCreators uses Object.keys to iterate all function properties of an object and wrap them with a dispatch() call. In your case, even if you use something like bindActionCreators(new ActionCreator()) it won't work, because Babel transpiles methods to non-enumerable properties.

A possible solution might be declaring all methods in the constructor:

class ActionCreator {
    constructor() {
        this.login = () => ({ type: 'LOGIN_STATUS' });
    }
}

but that would miss the point.

Another possibility is to create your own utility, which would be similar to bindActionCreators but would use Object.getOwnPropertyNames instead of Object.keys . However, you should be cautious here and make sure you only wrap the methods you need (ignore constructor , for example).

I'm also wondering what's your motivation? isn't a bit of an overhead using a class instead of a plain object?