jsnanigans / blac

BLoC pattern for react.
https://blac-docs.vercel.app
MIT License
36 stars 2 forks source link

TypeError: this.emit is not a function #1

Closed Rukkaitto closed 2 years ago

Rukkaitto commented 2 years ago

I'm getting this error when emit is called from a Cubit. This repository has a minimal reproduction sample : https://github.com/Rukkaitto/CleanProject

jsnanigans commented 2 years ago

Hey @Rukkaitto thanks for trying out this project! I'm super excited to get the first issue, You already closed it, but I will add an answer for others who might come along:

You are probably using the normal method definition like:

class X extends Cubit {
    //...
    someMethod() {
        this.emit(newState);
    }
}

The issue is the same as in classic react class components where you need to bind the method, but the easyest solution is:

turn that into an arrow function:

class X extends Cubit {
    //...
    someMethod = () => {
        this.emit(newState);
    }
}
sudoFerraz commented 2 years ago

@jsnanigans Is it possible to use this.emit outside of the constructor of a bloc?

jsnanigans commented 2 years ago

@sudoFerraz in a Bloc there is no this.emit thats only available in a Cubit.

for a bloc you would want to use this.on to add a listener for an event, then in there you can use the emit method you get in the callback, so if you need this.emit then you should consider using a Cubit

Example for a Cubit can be found here: https://blac-docs.vercel.app/docs/quickstart#create-a-cubit

here is an example of a Bloc:

export enum AuthEvent {
  unknown = "unknown",
  authenticated = "authenticated",
  unauthenticated = "unauthenticated",
}

export default class AuthBloc extends Bloc<AuthEvent, boolean> {
  constructor() {
    super(false)

    this.on(AuthEvent.unknown, (_, emit) => {
      emit(false);
    })
    this.on(AuthEvent.unauthenticated, (_, emit) => {
      emit(false);
    })
    this.on(AuthEvent.authenticated, (_, emit) => {
      emit(true);
    })
  };
}