'Providing two combined Reducers for my redux saga store prevents my websocket channel message from triggering, but only one does not?

Configured my store this way with redux toolkit for sure

  const rootReducer = combineReducers({
      someReducer,
      systemsConfigs
      });

  const store = return configureStore({
      devTools: true,
      reducer: rootReducer ,
      // middleware: [middleware, logger],
      middleware: (getDefaultMiddleware) => getDefaultMiddleware({ thunk: false }).concat(middleware),
 
    });
  middleware.run(sagaRoot)

And thats my channel i am connecting to it

export function createSocketChannel(
  productId: ProductId,
  pair: string,
  createSocket = () => new WebSocket('wss://somewebsocket')
) {
  return eventChannel<SocketEvent>((emitter) => {
    const socket_OrderBook = createSocket();
    socket_OrderBook.addEventListener('open', () => {
      emitter({
        type: 'connection-established',
        payload: true,
      });
      
      socket_OrderBook.send(
        `subscribe-asdqwe`
      );
    });

    socket_OrderBook.addEventListener('message', (event) => {
      if (event.data?.includes('bids')) {
        emitter({
          type: 'message',
          payload: JSON.parse(event.data),
        });
        //
      }
    });

    socket_OrderBook.addEventListener('close', (event: any) => {
      emitter(new SocketClosedByServer());
    });
    return () => {
      if (socket_OrderBook.readyState === WebSocket.OPEN) {
        socket_OrderBook.send(
          `unsubscribe-order-book-${pair}`
        );
      }
      if (socket_OrderBook.readyState === WebSocket.OPEN || socket_OrderBook.readyState === WebSocket.CONNECTING) {
        socket_OrderBook.close();
      }
    };
  }, buffers.expanding<SocketEvent>());
}

And here's how my saga connecting handlers looks like

export function* handleConnectingSocket(ctx: SagaContext) {
  try {
    const productId = yield select((state: State) => state.productId);
    const requested_pair = yield select((state: State) => state.requested_pair);

    if (ctx.socketChannel === null) {
      ctx.socketChannel = yield call(createSocketChannel, productId, requested_pair);
    }
    //
    const message: SocketEvent = yield take(ctx.socketChannel!);

    if (message.type !== 'connection-established') {
      throw new SocketUnexpectedResponseError();
    }

    yield put(connectedSocket());
  } catch (error: any) {
    reportError(error);

    yield put(
      disconnectedSocket({
        reason: SocketStateReasons.BAD_CONNECTION,
      })
    );
  }
}

export function* handleConnectedSocket(ctx: SagaContext) {
  try {
    while (true) {
      if (ctx.socketChannel === null) {
        break;
      }

      const events = yield flush(ctx.socketChannel);

      const startedExecutingAt = performance.now();

      if (Array.isArray(events)) {
        const deltas = events.reduce(
          (patch, event) => {
            if (event.type === 'message') {
              patch.bids.push(...event.payload.data?.bids);
              patch.asks.push(...event.payload.data?.asks);
              //
            }
            //

            return patch;
          },
          { bids: [], asks: [] } as SocketMessage
        );

        if (deltas.bids.length || deltas.asks.length) {
          yield putResolve(receivedDeltas(deltas));
        }
      }

      yield call(delayNextDispatch, startedExecutingAt);
    }
  } catch (error: any) {
    reportError(error);

    yield put(
      disconnectedSocket({
        reason: SocketStateReasons.UNKNOWN,
      })
    );
  }
}

After Debugging I got the following:

The Thing is that when I Provide one Reducer to my store the channel works well and data is fetched where as when providing combinedReducers I am getting

an established connection from my handleConnectingSocket generator function

and an empty event array [] from

const events = yield flush(ctx.socketChannel) written in handleConnectedSocket

Tried to clarify as much as possible



Solution 1:[1]

ok so I start refactoring my typescript by changing the types, then saw all the places that break, there was a problem in my sagas.tsx.

Ping me if someone faced such an issue in the future

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohamad Mchawrab