sockets - 在 socket.on() 的回调上调度操作

Question

所以基本上我得到了这个套接字，它工作正常，向我发送“新订单”消息。

我正在使用 redux，并且我想分派(dispatch)一个操作，然后 reducer 会得到它并且我的商店将会更新。但这段代码没有做任何事情!

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));        
});

它确实调用了该 Action ，但我的 reducer 没有“听到”该 Action ! :(

我听说过一些关于使用中间件的事情，但我就是不知道该怎么做。

有人能解释一下如何使用中间件在接收套接字消息时调度操作，以及为什么我的代码不起作用？感谢并抱歉新手问题

Answer 1

此代码应该适合您:

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));
    }
});

以正常方式将处理程序函数绑定(bind)到套接字看起来像。

socket.on('event', handlerFunc)

因此只有在事件触发时才会调用处理函数。

如果我们需要在触发事件时调用 handlerFunc 之前将调度传递给绑定(bind)的 handlerFunc，那么这对我们不起作用。

但是，我们可以通过使用称为“柯里化(Currying)”的函数式编程技术来解决这个问题，该技术允许我们将事件处理程序函数分解为一系列可以在稍后的时间点逐步调用的函数。

Currying is when you break down a function that takes multiple arguments into a series of functions that take part of the arguments.

套接字事件有两个重要的时间点。

1. 处理函数绑定(bind)到套接字实例

2. 调用处理函数

我们可以在时间点一访问 Redux 存储的调度方法，但不能在时间点二访问。柯里化(Currying)允许我们“存储”第二个时间点的调度方法。

所以我们能做的就是调用一个带有dispatch的函数来返回我们的handlerFunction。

function handlerFunc(order){
  dispatch(socketNewOrder(order));
}

function passDispatch(dispatch){
  return handlerFunc
};

socket.on('event', passDispatch(dispatch));

因此，虽然这可能看起来很奇怪，但它的结果与第一个示例完全相同。通过柯里化(Currying)，尽管事件处理程序将在稍后的时间点被调用，但我们仍然能够分派(dispatch)操作，因为我们可以访问分派(dispatch)变量。

我们可以使用中间件来减少每次绑定(bind)处理函数时重复柯里化(Currying)处理函数的情况。