Next.js Discord

Discord Forum

Can I use zustand in a class object (an actual object, not a class component)

Unanswered
Birman posted this in #help-forum
Open in Discord
BirmanOP
I'm trying to build a reusable architecture in Nextjs app router.

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

BirmanOP
Basically this Login class extends the RequestBuilder one, passing some configs such as endpoint, methods, and some other stuff to the extended class. The most important thing is this ResponseHandler object, that implements how the response should be deal with, in this case has the method handleSuccess (when there's a success response from the api)

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.