我们可以在类中定义的redux Action Creators上使用bindActionCreators()吗?
问题描述:
我在下面的方式定义一个类的内部终极版动作的创造者:我们可以在类中定义的redux Action Creators上使用bindActionCreators()吗?
export class ActionCreator {
login() {
return { type: 'LOGIN_STATUS' };
}
fbLoginStatusOK(user) {
return { type: 'LOGIN_OK', user };
}
}
然后,反应的组分中我使用他们这样的:
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>
);
}
}
如何使用bindActionCreators上的“ ActionCreator'class or its object?
(使每一个动作创建者包裹成一个调度呼叫,这样他们可以直接调用)
答
bindActionCreators
使用Object.keys
迭代的对象的所有功能性,并用dispatch()
呼叫包裹它们。 就你而言,即使你使用类似bindActionCreators(new ActionCreator())
之类的东西,它也不会起作用,因为Babel
会将方法转换为不可枚举的属性。
一个可能的解决方案可能会宣布在构造函数中的所有方法:
class ActionCreator {
constructor() {
this.login =() => ({ type: 'LOGIN_STATUS' });
}
}
但会错过了这一点。
另一种可能性是创建自己的实用程序,它将类似于bindActionCreators
,但将使用Object.getOwnPropertyNames
而不是Object.keys
。但是,您应该谨慎从事,并确保您只包装所需的方法(例如,忽略constructor
)。
我也想知道你的动机是什么?使用类而不是普通对象的开销不是一点点吗?
由于React是基于类的,我只是试图在Redux部分尽可能地放置类封装。 – Chebyr
我不会称React为“基于类”,而只是“模块化”。另外,不要忘记,Redux不一定与React配合使用。在你的例子中,我看不到实际需要声明一个类并实例化。从技术上讲,它也会导致更大的代码库。 –
那么我们可以去ActionCreator类中的静态方法删除,然后使用bindActionCreators(ActionCreator,dispatch)? – Chebyr