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 商店，将其他操作分派到网上聊天商店？有没有其他方法可以实现这一目标？

Answer 1

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

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

此外，网上聊天中的欢迎消息行为也略有变化。有关更多详细信息，请查看此内容。

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 = {};
}

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

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

但是{dispatch}在网络聊天中到底指的是什么.js？