Can I use zustand in a class object (an actual object, not a class component)
For this, I'm build a class based structure to deal with requests and responses, here's a part of the logic in the project:
1st I have a login form that has the instance of the object LoginHandler and passes it to a Form default component.
import { LoginHandler } from "@/form/handler/submit/LoginHandler";
...
export default function Login({}) {
const submitHandler = new LoginHandler({});
return <Form formConfig={LoginForm} submitHandler={submitHandler} />;
}
this LoginHandler basically implements how the form should deal with the request (using a method onSubmit), in the case it uses the class Login, passing the entity used and its data, the using the build method.
import { Login } from "@request/builder/Login";
...
async onSubmit(values: any, id?: string): Promise<any> {
const loginRequestBuilder = new Login({ entity: this.entity, data: values });
return await loginRequestBuilder.build();
}
This Login class is implemented like that
import { Login as ResponseHandler } from "@request/response/handler/Login";
...
export class Login extends RequestBuilder {
constructor({ entity, data }: LoginProps) {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const endpoint = entity ? `${apiUrl}/login/${entity}` : `${apiUrl}/login`;
const method: Methods = "POST";
const responseHandler = new ResponseHandler({ errorHandlerCollection: new DefaultApi() });
super({ endpoint, method, data, responseHandler });
}
}
+ more below
1 Reply
import { useAuthStore } from "@/provider/AuthProvider";
..
protected handleSuccess(result: LoginResponse): any {
if (!result.userNotFound) {
const { token, id } = result;
this.expirationDate.setMonth(this.expirationDate.getMonth() + 1);
this.cookie.setCookie("token", token, this.expirationDate);
this.cookie.setCookie("id", id.toString(), this.expirationDate);
useAuthStore.getState().setUser({ avatarUrl: "/project/assets/avatar-mock.png", name: "Israel", planType: "free" });
}
const rootUrl = process.env.NEXT_PUBLIC_ROOT_URL;
return (window.location.href = rootUrl!);
}
As you can see I'm using a provider to store some non sensitive data from the user logged in, and them redirecting the user to the root page.
But here's the problem, When I try to acces some of the user data inside any react component, it seems to be an empty object (with no data at all)
Has anyone have ever deal with a situaltion like this? trying to set some data inside a zustand store inside a class object and the acessing it inside a react component?
Any help will be useful, thanks in advance for any help.