对 socket.on() 回调的调度操作 [英] Dispatch action on the callback of socket.on()

问题描述

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

So basically I got this socket, that is working correctly sending me 'new order' message.

我正在使用 redux，并且我想调度一个动作，而不是一个 reducer 会得到它并且我的商店将被更新.但这段代码没有做任何事情！

I'm using redux, and i want to dispatch an action, than a reducer would get it and my store would be updated. but this code doesn't do anything!

socket.on('new order', (order) => {    
    return (dispatch) => {
      dispatch(socketNewOrder(order));
    }
});

这是我的操作，它位于同一个文件中:

And here is my action, which is located at the same file:

export const socketNewOrder = (order) => {
  return {
    type: 'SOCKET_NEW_ORDER',
    payload: order
  }
}

我也尝试过这样调用我的操作:

I also tried to call my action like this:

socket.on('new order', (order) => {    
    socketNewOrder(order));        
});

它确实调用了动作，但我的减速器没有听到"动作！:(

It called the action indeed, but the action wasn't 'heard' by my reducer! :(

我听说了一些关于使用中间件的消息，但我就是不知道如何去做.

I heard something about using middlewares, but i just can't figure out how to do it.

谁能解释我如何使用中间件在我收到套接字消息时分派动作，以及为什么我的代码不起作用?感谢和抱歉新手问题

Could anyone explain me how to use middlewares for dispatching actions as i receive socket messages, and why my code doesn't work? Thanks and sorry for newbie questio

推荐答案

这段代码应该适合你:

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

说明

您的事件处理函数已正确分解为一系列函数.然而，这些函数的顺序是错误的.

Your event handler function were correctly broken down into a series of functions. However these functions were in the wrong order.

socket.on('new order', (order) => {    
    return (dispatch) => {
      dispatch(socketNewOrder(order));
    }
});

这是组成 eventHandler 函数的系列函数的正确顺序:

This is the correct order of the series functions that make up your eventHandler function:

socket.on('new order', (dispatch) => {    
    return (order) => {
      dispatch(socketNewOrder(order));
    }
});

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

Binding a handler function to a socket in the normal way would look like.

socket.on('event', handlerFunc)

所以处理函数只会在事件被触发时调用.

So the handler function would only be called when the event is triggered.

如果在触发事件时调用 handlerFunc 之前绑定时需要将 dispatch 传递给 handlerFunc，这对我们不起作用.

This won't work for us if we need to pass dispatch to the handlerFunc when it is bound before handlerFunc is called when the event is triggered.

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

However we can solve this through the use of a functional programming technique called currying which allows us to break the event handler handler function into a series of functions that can be called at progressively later points in time.

柯里化是当你分解一个需要多个函数的函数时参数转换成一系列函数，这些函数取参数的一部分.

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

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

There are two important points in time for socket events.

1. 处理函数绑定到socket实例

1. The handler function is bound to the socket instance

调用处理函数

我们可以在时间点一访问 Redux 商店的 dispatch 方法，但不能在时间点二访问.柯里化允许我们存储"时间点 2 的调度方法.

We have access to the Redux store's dispatch method at timepoint one but not at timepoint two. Currying allows us to 'store' the dispatch method for timepoint two.

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

So what we can do is call a function with dispatch that returns our handlerFunction.

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

function passDispatch(dispatch){
  return handlerFunc
};

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

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

So although this may look odd it results in exactly the same thing as the first example. Through currying although the event handler will be called at a later point in time we will still be able to dispatch actions as we have access to the dispatch variable.

我们可以使用中间件来减少每次绑定处理程序函数时重复柯里化的情况.

We could use middleware to alleviate the repetition of currying our handler functions each time they are bound.

这篇关于对 socket.on() 回调的调度操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！