Sockets 对socket.on()的回调执行分派操作
所以基本上我得到了这个套接字,它正常工作,向我发送“新订单”消息 我使用的是redux,我想发送一个动作,而reducer会得到它,我的商店也会更新。但是这段代码什么都不做Sockets 对socket.on()的回调执行分派操作,sockets,socket.io,redux,action,dispatch,Sockets,Socket.io,Redux,Action,Dispatch,所以基本上我得到了这个套接字,它正常工作,向我发送“新订单”消息 我使用的是redux,我想发送一个动作,而reducer会得到它,我的商店也会更新。但是这段代码什么都不做 socket.on('new order', (order) => { return (dispatch) => { dispatch(socketNewOrder(order)); } }); 这是我的行动,它位于同一个文件中: export const socketNew
socket.on('new order', (order) => {
return (dispatch) => {
dispatch(socketNewOrder(order));
}
});
这是我的行动,它位于同一个文件中:
export const socketNewOrder = (order) => {
return {
type: 'SOCKET_NEW_ORDER',
payload: order
}
}
我也试着这样称呼我的行为:
socket.on('new order', (order) => {
socketNewOrder(order));
});
这确实是一个行动,但我的减速机没有“听到”这个行动(
我听说了一些关于使用中间件的事,但我就是不知道怎么做
有人能告诉我在我接收套接字消息时如何使用中间件来调度操作,以及为什么我的代码不起作用吗?感谢并抱歉新手提出的问题,关键是您需要在套接字事件侦听器中访问
调度。使用中间件从外部事件源创建操作是一种有效的方法模式
const socketMiddleware = (store) => {
// We have access to store, add socket listeners
socket.on('new order', (order) => {
store.dispatch(socketNewOrder(order));
});
// Actual middleware implementation just passes all
// actions through without touching them
return (next) => (action) => {
next(action);
}
}
此代码应适用于您:
export const socketNewOrder = (order) => {
return {
type: 'SOCKET_NEW_ORDER',
payload: order
}
}
const handlerFunc = (dispatch) => (order) => {
dispatch(socketNewOrder(order));
}
});
socket.on('event', handlerFunc(dispatch));
// make sure the stores dispatch method is within scope
解释
事件处理程序函数已正确分解为一系列函数。但是这些函数的顺序错误
socket.on('new order', (order) => {
return (dispatch) => {
dispatch(socketNewOrder(order));
}
});
这是构成eventHandler函数的系列函数的正确顺序:
socket.on('new order', (dispatch) => {
return (order) => {
dispatch(socketNewOrder(order));
}
});
以正常的方式将处理程序函数绑定到套接字就像这样
socket.on('event', handlerFunc)
因此,只有在触发事件时才会调用处理程序函数
如果我们需要在触发事件时调用handlerFunc之前,在绑定handlerFunc时将dispatch传递给handlerFunc,那么这将不适用于我们
但是,我们可以通过使用一种称为“currying”的函数编程技术来解决这个问题,该技术允许我们将事件处理程序函数分解为一系列函数,这些函数可以在以后的时间点逐步调用。
Currying是指当你分解一个函数时,它需要多个参数
参数转换为一系列包含部分参数的函数
套接字事件有两个重要的时间点
处理程序函数绑定到套接字实例
调用处理程序函数
我们可以在时间点1访问Redux store的调度方法,但在时间点2无法访问。Currying允许我们“存储”时间点2的调度方法
所以我们能做的就是调用一个函数,通过dispatch返回我们的handler函数
function handlerFunc(order){
dispatch(socketNewOrder(order));
}
function passDispatch(dispatch){
return handlerFunc
};
socket.on('event', passDispatch(dispatch));
因此,尽管这看起来很奇怪,但其结果与第一个示例完全相同。尽管事件处理程序将在稍后调用,但通过curry,我们仍然能够调度操作,因为我们可以访问dispatch变量
我们可以使用中间件来减少每次绑定处理程序函数时重复使用处理程序函数。您返回的函数从未从套接字事件处理程序调用过。您希望它做什么?而且,由于从未调用过该函数,您的dispatch()
函数从未被调用。您的意思是:socket.on('neworder',(order)=>{dispatch(socketNewOrder(order));};
?如果我这样做,它会说dispatch不是一个函数!什么是dispatch()
then?在我知道之前,我认为dispatch是用来“触发”和操作的。中间件的这个实现硬编码事件名称。套接字实例从何处引用。在store arg之前,是否最好将套接字实例作为参数传递给中间件调用?