BotFramework WebChat - 示例 #14 - 两个 Redux 商店的中间件？

Question

我将通过提及我是 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 商店，并将其他操作分派到 Web Chat 商店？还有其他方法可以实现吗？

Answer 1

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

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

此外，网络聊天中的欢迎消息行为也略有变化。查看 this 了解更多详情。

Answer 2

@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 store 和第二个自定义 redux store。耶！我还有一个问题是，你能解释一下这个例子中 {dispatch} 和 props.appDispatch 之间的区别吗？后者似乎是从 index.js:

中的原始声明传递过来的

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

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

BotFramework WebChat - 示例 #14 - 两个 Redux 商店的中间件？

BotFramework WebChat - Sample #14 - Middleware for both Redux stores?

web-chat

redux

botframework