Question

所以基本上我得到了这个套接字，正确地向我发送'新订单'消息。

我正在使用redux，我想发送一个动作，而不是减速器会得到它，我的商店会更新。但是这段代码没有做任何事情！

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

它确实称之为动作，但我的减速机没有“听到”动作！：（

我听说有关使用中间件的事情，但我无法弄清楚如何做到这一点。

有人可以解释我如何使用中间件来调度操作，因为我收到套接字消息，为什么我的代码不起作用？谢谢和抱歉新手问题

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

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

socket.on('event', handlerFunc)

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

如果我们需要在事件被触发之前调用handlerFunc之前将dispatch传递给handlerFunc，那么这对我们不起作用。

但是我们可以通过使用一种称为 currying的函数编程技术来解决这个问题，它允许我们将事件处理程序处理函数分解为一系列可以在以后逐步调用的函数。

Currying是指你分解一个需要多个的函数参数包含一系列参数的函数。

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

处理函数绑定到套接字实例
处理程序函数名为

我们可以在时间点1访问Redux商店的调度方法，但不能在时间点2访问。 Currying允许我们“存储”时间点二的调度方法。

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

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

function passDispatch(dispatch){
  return handlerFunc
};

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

所以尽管这可能看起来很奇怪，但它与第一个例子完全相同。通过currying虽然稍后会调用事件处理程序，但我们仍然可以调度操作，因为我们可以访问调度变量。

我们可以使用中间件来减轻每次绑定时处理函数的重复。

Answer 2

关键是您需要在套接字事件侦听器中访问dispatch。使用中间件从外部事件源创建操作是一种有效的模式。

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

对socket.on（）回调的调度操作

2 个答案: