如何在 vanilla js 类中使用 redux？

Question

I have a javascript class - not a React component - that acts as a service to handle logic tier (api call, etc.) in a React application. Its methods all use redux (useSelector or useDispatch), and everything works fine.

However, the linter goes mad:

React Hook "useSelector" cannot be called in a class component.

The class looks like this:

 export class UserService implements ProjectService { private userService: UserService; constructor(dependencies: Dependencies) { this.userService = dependencies.userService; } public updateUserProfile(id: string) { const dispatch = useDispatch(); return (user: User) => { return dispatch(Event.userManager(user)); }; } }

How to refactor this?

Answer 1

To access redux, it depends on your context:

• in React function component: use react-redux hooks or connect
• in React class component: use react-redux connect
• outside a React class: use redux Store API :

import { store } from "where you create and export your store";
store.dispatch({type: ... });
const events = store.getState().events;
store.subscribe(() => console.log("The store has been modified"));