Multiple instances of StateNotifier are created

[alextran1502]

Describe the bug
I have a WebSocket StateNotifier to receive WebSocket's event and it has Ref ref as a parameter to communicate with different providers. Below is the StateNotifier class and the provider variable.

class WebsocketNotifier extends StateNotifier<WebscoketState> {
  WebsocketNotifier(this.ref) : super(WebscoketState(socket: null, isConnected: false)) {
    debugPrint("Init websocket instance");
  }

  final Ref ref;

  connect() {
    var authenticationState = ref.watch(authenticationProvider);

    if (authenticationState.isAuthenticated) {
      var accessToken = Hive.box(userInfoBox).get(accessTokenKey);
      var endpoint = Hive.box(userInfoBox).get(serverEndpointKey);
      try {
        debugPrint("[WEBSOCKET] Attempting to connect to ws");
        // Configure socket transports must be sepecified
        Socket socket = io(
          endpoint,
          OptionBuilder()
              .setTransports(['websocket'])
              .enableReconnection()
              .enableForceNew()
              .enableForceNewConnection()
              .enableAutoConnect()
              .setExtraHeaders({"Authorization": "Bearer $accessToken"})
              .build(),
        );

        socket.onConnect((_) {
          debugPrint("[WEBSOCKET] Established Websocket Connection");
          state = WebscoketState(isConnected: true, socket: socket);
        });

        socket.onDisconnect((_) {
          debugPrint("[WEBSOCKET] Disconnect to Websocket Connection");
          state = WebscoketState(isConnected: false, socket: null);
        });

        socket.on('error', (errorMessage) {
          debugPrint("Webcoket Error - $errorMessage");
          state = WebscoketState(isConnected: false, socket: null);
        });

        socket.on('on_upload_success', (data) {
          var jsonString = jsonDecode(data.toString());
          ImmichAsset newAsset = ImmichAsset.fromMap(jsonString);
          ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
        });
      } catch (e) {
        debugPrint("[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
      }
    }
  }

  disconnect() {
    debugPrint("[WEBSOCKET] Attempting to disconnect");
    var socket = state.socket?.disconnect();
    if (socket != null) {
      if (socket.disconnected) {
        state = WebscoketState(isConnected: false, socket: null);
      }
    }
  }
}

final websocketProvider = StateNotifierProvider<WebsocketNotifier, WebscoketState>((ref) {
  return WebsocketNotifier(ref);
});

I have a drawer that handles logging out by calling ref.watch(websocketProvider.notifier).disconnect();. It always creates a new instance of the StateNotifier, therefore cannot log out the instance I want. I believe I made a mistake somewhere and what caused this behavior?

To Reproduce

You can clone my repository and run the application - I have a dockerized the application so it is fairly straightforward to replicate
https://github.com/alextran1502/immich

Expected behavior
Using the same instance Websocket to log out.

[rrousselGit]

You're using ref.watch in a couple of places within your class. If the value obtained changes, that'll recreate the class.

Maybe you want to use ref.listen instead

[alextran1502]

Where should I use ref.listen? Here is my onTap method from ListTile that handles logging out and cleaning up the application. I want to invoke the method in StateNotifier, and the method will change the state of the provider.

Thank you for your help. I appreciate your time

[rrousselGit]

I'm not referring to your widgets here. I'm talking about within the StateNotifier

You are using ref.watch within the StateNotifier. Change those to ref.listen

[alextran1502]

AH, I see! The authentication state changes after the logout method is executed, which probably leads to the recreation of the class. Thank you for your insight!