1

我将通过提到我对 React 和 Redux 都是新手来作为这个问题的开头......

我正在使用 BotFramework-WebChat 示例中的示例 #14。

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/14.customization-piping-to-redux

此外，为了通过管道传递 Redux 操作活动以更改 UI，我还想包括侦听“DIRECT_LINE/CONNECT_FULFILLED”然后使用“webchat/join”有效负载分派“WEB_CHAT/SEND_EVENT”的中间件，以便我可以显示欢迎信息。

我尝试将 dispatchIncomingActivityMiddleware.js 修改为如下所示：

export default function (dispatch) {
  return () => next => action => {
    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
      const { activity } = action.payload;
      if (
        activity.type === 'event'
        && activity.from.role === 'bot'
        && activity.name === 'redux action'
      ) {
        dispatch(activity.value);
      }
    } else if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: {
            name: 'webchat/join',
            value: {
              language: window.navigator.language
            }
          }
        });
    } 

    return next(action);
  };
}

不用说，它不起作用。我认为这是因为现在所有操作都被分派到第二个应用程序 Redux 商店而不是 Web Chat Redux 商店。我的问题是，我如何让它两者兼得？有没有办法将某些操作分派到应用程序 Redux 商店，并将其他操作分派到网络聊天商店？还有另一种方法可以实现这一目标吗？

4

2 回答 2

1

具有两个属性的对象 -dispatch和getState- 被传递给存储中间件。您应该dispatch从传入对象访问属性或在函数头中解构它。尝试：

export default function ({ dispatch }) {
    return ....
}

此外，Web Chat 中的欢迎消息行为也略有改变。看看这个了解更多细节。

于 2019-07-20T16:59:03.353 回答
0

@tdurnford 感谢您的回复。通过将以下内容添加到 WebChat.js，我终于可以让它工作：

constructor(props) {
    super(props);

    this.store = createStore(
      {},
      ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                name: 'webchat/join',
                value: {
                  language: window.navigator.language
                }
              }
            });
        } 

        return next(action);
      },
      dispatchIncomingActivityMiddleware(props.appDispatch)
    );

    this.state = {};
  }

现在，我可以将操作分派到 Web Chat redux 存储和第二个自定义 redux 存储。耶！我还有一个问题是，你能解释一下这个例子中{dispatch}和之间的区别吗？props.appDispatch后者似乎是从 index.js 中的原始声明传递过来的：

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

但是{dispatch}在 WebChat.js 中到底指的是什么？

于 2019-07-31T16:25:18.700 回答