React redux实例化非组件类

Question

我想看看如何用redux实例化一个非组件类。

所以我在商店里添加了订阅：

import user from '../helpers/user';
...
store.subscribe(() => {
user.setState(store.getState().user);
});
export default store;

我的助手类：

class User {
user: UserState | undefined | null;
setState(userState: UserState | undefined | null) {
this.user = userState;
}

get isAdmin(): boolean {
return !!(this.user && (this.user.role === USER_ROLE_ADMIN || this.user.role === USER_ROLE_SUPER));
}
}
export default new User();

我在react组件中使用类属性：

import user from '../../helpers/user';
{isAdmin && (...)}

但这并不能正常工作，状态更改似乎被滥用了。例如，当我登录时，它看不到更新的状态，所以我需要添加一个useEffect来观察组件中的状态更改，我试图避免这种情况，因为我希望助手类来管理它。我对redux状态有什么误解吗？

如有任何帮助/建议，我们将不胜感激。

Answer 1

您需要将您的组件与redux存储连接，因此，当存储的状态发生更改时，它将重新呈现您的组件。文档页面：https://react-redux.js.org/api/connect例如：

const componentA = () => {
//some logic

}
const mapStateToProps = (state) => {
isAdmin: state.user && (state.user.role === USER_ROLE_ADMIN || state.user.role === USER_ROLE_SUPER)
}
export default connect(mapStateToProps)(componentA)