为什么我的一个萨加火，而不是另一个(设置相同的方式.我想)

Question

我是一个新的复古传奇，并一直在寻找解决我的问题几天，所以我想我应该在这里要求，因为我已经走空了。

我正在为我正在做的一个项目对webchat库进行编辑。我没有使用直接线路，而是试图使僵尸框架-webchat库与signalR兼容。具体来说，我正在对核心和组件包进行更改。我的目标是模拟直接行redux流，以便signalR在僵尸框架-webchat库的上下文中工作。

基本流程从我的根项目开始，这是一个简单的反作用web应用程序。

rootproject/WebChat.js

import ReactWebChat from 'botframework-webchat';
 render() {
    ...

    <ReactWebChat
      className={`${className || ''} web-chat`}
      signalR={this.signalRConnection}
      //directLine={this.createDirectLine(token)}
      store={store}
      styleSet={styleSet}
   />
 }

出于我的目的，我发送一个signalR连接或directLine连接对象。然后，在组件包中的“僵尸框架-网络聊天”中，ReactWebChat经历了一系列的手工操作，并最终到达了这里：

rootproject/botframework-webchat/botframework-webchat-component/Composer.js

useEffect(() => {
    if (signalR) {
      console.log("Dispatch signalR");
      dispatch(
        connectSignalRAction({
          signalR
        })
      );
    } 
    else {
      dispatch(
        createConnectAction({
          directLine,
          userID,
          username
        })
      );
    }

    return () => {
      dispatch(disconnect());
    };
  }, [dispatch, signalR, userID, username]);

在发送directline或signalr连接对象时，都会正确地分派相应的操作。然后截取这个动作。这是在僵尸框架-webchat核心包中完成的。我将首先展示这个通过直接线路工作的流程。

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/connect.js

const CONNECT = 'DIRECT_LINE/CONNECT';
const CONNECT_FULFILLED = `${CONNECT}_FULFILLED`;
const CONNECT_FULFILLING = `${CONNECT}_FULFILLING`;
const CONNECT_PENDING = `${CONNECT}_PENDING`;
const CONNECT_REJECTED = `${CONNECT}_REJECTED`;
const CONNECT_STILL_PENDING = `${CONNECT}_STILL_PENDING`;

export default function connect({ directLine, userID, username }) {
  return {
    type: CONNECT,
    payload: {
      directLine,
      userID,
      username
    }
  };
}

export { CONNECT, CONNECT_FULFILLED, CONNECT_FULFILLING, CONNECT_PENDING, CONNECT_REJECTED, CONNECT_STILL_PENDING };

这会触发CONNECT，并在这里找到：

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/connectionStatusToNotificationSaga.js

/* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2, 3, 4] }] */

import { call, put, takeLatest } from 'redux-saga/effects';

import { CONNECT } from '../actions/connect';
import createPromiseQueue from '../createPromiseQueue';
import setNotification from '../actions/setNotification';

const CONNECTIVITY_STATUS_NOTIFICATION_ID = 'connectivitystatus';

function subscribeToPromiseQueue(observable) {
  const { push, shift } = createPromiseQueue();
  const subscription = observable.subscribe({ next: push });

  return {
    shift,
    unsubscribe() {
      subscription.unsubscribe();
    }
  };
}

function* connectionStatusToNotification({ payload: { directLine } }) {
  const { shift, unsubscribe } = subscribeToPromiseQueue(directLine.connectionStatus$);

  console.log("subscribe connection status: " + directLine.connectionStatus$);


  try {
    let reconnecting;

    for (;;) {
      const value = yield call(shift);

      switch (value) {
        case 0:
        case 1:
          yield put(
            setNotification({
              id: CONNECTIVITY_STATUS_NOTIFICATION_ID,
              level: 'info',
              message: reconnecting ? 'reconnecting' : 'connecting'
            })
          );

          break;

        case 2:
          reconnecting = 1;

          yield put(
            setNotification({
              id: CONNECTIVITY_STATUS_NOTIFICATION_ID,
              level: 'success',
              message: 'connected'
            })
          );

          break;

        case 3:
        case 4:
          reconnecting = 1;

          yield put(
            setNotification({
              id: CONNECTIVITY_STATUS_NOTIFICATION_ID,
              level: 'error',
              message: 'failedtoconnect'
            })
          );

          break;

        default:
          break;
      }
    }
  } finally {
    unsubscribe();
  }
}

export default function*() {
  yield takeLatest(CONNECT, connectionStatusToNotification);
}

我能够在项目中设置断点，并逐步完成上面的代码，所以这是它的第一步。供参考，这里是商店和萨加。

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/createStore.ts

// This is for the racing between sagaMiddleware and store
/* eslint no-use-before-define: "off" */

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './reducer';
import sagaError from './actions/sagaError';
import sagas from './sagas';

export default function createWebChatStore(initialState, ...middlewares):any {
  const sagaMiddleware = createSagaMiddleware({
    onError: (...args) => {
      const [err] = args;

      console.error(err);

      store.dispatch(sagaError());
    }
  });

  const store = createStore(
    reducer, 
    initialState || {},
    applyMiddleware(...middlewares, sagaMiddleware)
  );

  sagaMiddleware.run(sagas);

  return store;
}

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/sagas.js

import { fork } from 'redux-saga/effects';

import clearSuggestedActionsOnPostActivitySaga from './sagas/clearSuggestedActionsOnPostActivitySaga';
import connectionStatusToNotificationSaga from './sagas/connectionStatusToNotificationSaga';
import connectionStatusUpdateSaga from './sagas/connectionStatusUpdateSaga';
import connectSaga from './sagas/connectSaga';
import connectSignalRSaga from './sagas/connectSignalRSaga';
import detectSlowConnectionSaga from './sagas/detectSlowConnectionSaga';
import emitTypingIndicatorToPostActivitySaga from './sagas/emitTypingIndicatorToPostActivitySaga';
import incomingActivitySaga from './sagas/incomingActivitySaga';
import markAllAsSpokenOnStopSpeakActivitySaga from './sagas/markAllAsSpokenOnStopSpeakActivitySaga';
import postActivitySaga from './sagas/postActivitySaga';
import sendEventToPostActivitySaga from './sagas/sendEventToPostActivitySaga';
import sendFilesToPostActivitySaga from './sagas/sendFilesToPostActivitySaga';
import sendMessageBackToPostActivitySaga from './sagas/sendMessageBackToPostActivitySaga';
import sendMessageToPostActivitySaga from './sagas/sendMessageToPostActivitySaga';
import sendPostBackToPostActivitySaga from './sagas/sendPostBackToPostActivitySaga';
import sendTypingIndicatorOnSetSendBoxSaga from './sagas/sendTypingIndicatorOnSetSendBoxSaga';
import speakActivityAndStartDictateOnIncomingActivityFromOthersSaga from './sagas/speakActivityAndStartDictateOnIncomingActivityFromOthersSaga';
import startDictateOnSpeakCompleteSaga from './sagas/startDictateOnSpeakCompleteSaga';
import startSpeakActivityOnPostActivitySaga from './sagas/startSpeakActivityOnPostActivitySaga';
import stopDictateOnCardActionSaga from './sagas/stopDictateOnCardActionSaga';
import stopSpeakingActivityOnInputSaga from './sagas/stopSpeakingActivityOnInputSaga';
import submitSendBoxSaga from './sagas/submitSendBoxSaga';
import submitSendBoxSagaSignalR from './sagas/submitSendBoxSagaSignalR';
import postActivitySagaSignalR from './sagas/postActivitySagaSignalR';
import sendMessageBackToPostActivitySagaSignalR from './sagas/sendMessageToPostActivitySagaSignalR';
import testSaga from './sagas/TestSaga';


export default function* sagas() {
  // TODO: [P2] Since fork() silently catches all exceptions, we need to find a way to console.error them out.

  yield fork(testSaga);
  yield fork(clearSuggestedActionsOnPostActivitySaga);
  yield fork(connectionStatusToNotificationSaga);
  yield fork(connectionStatusUpdateSaga);
  yield fork(connectSaga);
  yield fork(connectSignalRSaga);
  yield fork(detectSlowConnectionSaga);
  yield fork(emitTypingIndicatorToPostActivitySaga);
  yield fork(incomingActivitySaga);
  yield fork(markAllAsSpokenOnStopSpeakActivitySaga);
  yield fork(postActivitySaga);
  yield fork(sendEventToPostActivitySaga);
  yield fork(sendFilesToPostActivitySaga);
  yield fork(sendMessageBackToPostActivitySaga);
  yield fork(sendMessageToPostActivitySaga);
  yield fork(sendPostBackToPostActivitySaga);
  yield fork(sendTypingIndicatorOnSetSendBoxSaga);
  yield fork(speakActivityAndStartDictateOnIncomingActivityFromOthersSaga);
  yield fork(startDictateOnSpeakCompleteSaga);
  yield fork(startSpeakActivityOnPostActivitySaga);
  yield fork(stopDictateOnCardActionSaga);
  yield fork(stopSpeakingActivityOnInputSaga);
  yield fork(submitSendBoxSaga);
  yield fork(submitSendBoxSagaSignalR);
  yield fork(postActivitySagaSignalR);
  yield fork(sendMessageBackToPostActivitySagaSignalR);
}

流在使用directline时工作，但是当我发送一个signalR连接对象时，这个对象就会发出。

      dispatch(
        connectSignalRAction({
          signalR
        })

这一行动是派出的，但没有被传奇所捕获。具体来说，以下是行动和传奇：

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/connectSignalR.js

const CONNECT_SIGNALR = 'SIGNALR/CONNECT';
const CONNECT_SIGNALR_FULFILLED = `${CONNECT_SIGNALR}_FULFILLED`;
const CONNECT_SIGNALR_FULFILLING = `${CONNECT_SIGNALR}_FULFILLING`;
const CONNECT_SIGNALR_PENDING = `${CONNECT_SIGNALR}_PENDING`;
const CONNECT_SIGNALR_REJECTED = `${CONNECT_SIGNALR}_REJECTED`;
const CONNECT_SIGNALR_STILL_PENDING = `${CONNECT_SIGNALR}_STILL_PENDING`;

export default function connectSignalR({ signalR }) {
  return {
    type: CONNECT_SIGNALR,
    payload: {
      signalR
    }
  };
}

export { CONNECT_SIGNALR, CONNECT_SIGNALR_FULFILLED, CONNECT_SIGNALR_FULFILLING, CONNECT_SIGNALR_PENDING, CONNECT_SIGNALR_REJECTED, CONNECT_SIGNALR_STILL_PENDING };

rootproject/botframework-webchat/botframework-webchat-component/botframework-webchat-core/connectSignalRSaga.js

/* eslint no-magic-numbers: ["error", { "ignore": [0, 10] }] */

import { call, cancel, cancelled, fork, put, race, take, takeEvery, takeLatest } from 'redux-saga/effects';

import { CONNECT_SIGNALR, CONNECT_SIGNALR_PENDING } from '../actions/connectSignalR';

function* workerSaga() {
  console.log("Hello from worker saga");
  yield put({ type: CONNECT_SIGNALR_PENDING });
}

export default function*() {
    // for (;;) {
    //   const {
    //     payload: { signalR }
    //   } = yield takeEvery(CONNECT_SIGNALR);

    // const {
    //   payload: { signalR }
    // } = yield takeEvery(CONNECT_SIGNALR, workerSaga);

    yield takeLatest(CONNECT_SIGNALR, workerSaga);

}

我在“connectSignalRSaga.js”中尝试过几种不同的方法，但似乎无法让workerSaga()运行，这使我相信默认函数永远不会产生结果。我试过使用断点和调试器语句，它在这个函数中没有停止(但是断点和调试器语句大部分由于某种原因都没有工作)。

所以我的问题是：：

1. 您是否知道为什么当使用directline时，“CONNECT”操作会被选中，但是在使用signalr时“CONNECT_SIGNALR”操作不会被选中？
2. 稍微偏离主题，但我有困难为这个项目设置Redux DevTools (它是一个同构的React应用程序)。我遵守了https://github.com/zalmoxisus/redux-devtools-extension#usage的指示，但分机一直告诉我“找不到商店”。我尝试过用‘extension包’包装商店，以及手动设置compose。我想做这个设置将有助于找出#1。

Answer 1

Web是使用BotFramework-DirectLineJS构建的，它是Web中显示的ConnectionStatus的实际来源。您可以引用不同的状态这里以及如何在整个directLine.ts中使用该枚举。

更重要的是，ConnectionStatus是通过connectSaga.js、connectionStatusUpdateSaga.js和其他各种文件中的网络聊天广泛使用的。

我强烈怀疑您的SignalR连接实际上不会发出连接状态，否则，会在网络聊天(如果发布的话)中获得连接状态。此外，根据您的SignalR连接状态命名约定，除非您已经更新了这些文件，以便也从SignalR连接对象读取并识别更新后的连接状态，否则网络聊天的许多部分可能不会获取它。

假设这就是问题所在，那么维护已经使用的连接状态命名约定并修改SignalR问题作为状态名称可能会更容易。