Пользовательский веб-сокет в архитектуре Redux

Я написал эту запись в FAQ и пример.

Если я понимаю ваш вопрос, вы спрашиваете, как динамически создавать дополнительные подписки во время выполнения?

Поскольку промежуточное программное обеспечение Redux может видеть каждое отправленное действие, которое проходит через конвейер промежуточного программного обеспечения, вы можете отправлять действия, которые предназначены только как команды для промежуточного программного обеспечения, которое что-то делает. Я не уверен, что такое MDXQuery, и также неясно, что вы хотите делать с сообщениями, полученными из этих подписок. В качестве примера я предполагаю, что вы хотите либо отправлять действия Redux при получении сообщения о подписке, либо потенциально выполнять с ними некоторую настраиваемую логику.

Вы можете написать собственное промежуточное ПО, которое прослушивает такие действия, как "CREATE_SUBSCRIPTION" и "CLOSE_SUBSCRIPTION", и потенциально принимает функцию обратного вызова для запуска при получении сообщения.

Вот как это может выглядеть:

// Add this to the store during setup
const subscriptionMiddleware = (storeAPI) => {
    let nextSubscriptionId = 0;
    const subscriptions = {};
    const bus = createBusSomehow();

    return (next) => (action) => {
        switch(action.type) {
            case "CREATE_SUBSCRIPTION" : {
                const {callback} = action;
                const subscriptionId = nextSubscriptionId;
                nextSubscriptionId++;

                const subscription = bus.channel(PATH, { mode: bus.wsModes.PULL })
                                        .createListener((...args) => {
                                            callback(dispatch, getState, ...args);
                                        });
                subscriptions[subscriptionId] = subscription;
                return subscriptionId;
            }
            case "CLOSE_SUBSCRIPTION" : {
                const {subscriptionId} = action;
                const subscription = subscriptions[subscriptionId];

                if (subscription) {
                    subscription.close();
                    delete subscriptions[subscriptionId];
                }
                return;
            }
        }
    }
}

// Use over in your components file
function createSubscription(callback) {
    return {type : "CREATE_SUBSCRIPTION", callback };
}

function closeSubscription(subscriptionId) {
    return {type :  "CLOSE_SUBSCRIPTION", subscriptionId};
}

// and in your component:
const actionCreators = {createSubscription, closeSubscription};

class MyComponent extends React.Component {
    componentDidMount() {
        this.subscriptionId = this.props.createSubscription(this.onMessageReceived);
    }

    componentWillUnmount() {
        this.props.closeSubscription(this.subscriptionId);
    }
}

export default connect(null, actionCreators)(MyComponent);

Я опробовал ваше решение для своей собственной проблемы, которая включает создание экземпляра сокета только тогда, когда пользователь вошел в систему, и вот как выглядит мой код:

const socketMiddleWare = url => store => {
  const socket = new SockJS(url, [], {
    sessionId: () => custom_token_id
  });
  return next => action => {
    switch (action.type) {
      case types.USER_LOGGED_IN:
        {
          socket.onopen = e => {
            console.info("Connection", e.type);

            store.dispatch({
              type: types.TOGGLE_SOCK_OPENING
            });

            if (e.type === "open") {
              store.dispatch({
                type: types.TOGGLE_SOCK_OPENED
              });
              createSession(custom_token_id, store);
              const data = {
                type: "GET_ACTIVE_SESSIONS",
                JWT_TOKEN: Cookies.get("agentClientToken")
              };
              store.dispatch({
                type: types.GET_ACTIVE_SESSIONS,
                payload: data
              });
            }
          };
          socket.onclose = () => {
            console.info("Connection closed");
            store.dispatch({
              type: types.POLL_ACTIVE_SESSIONS_STOP
            });
            // store.dispatch({ type: TOGGLE_SOCK_OPEN, payload: false });
          };
          socket.onmessage = e => {
            console.info(e)
          };
          if (
            action.type === types.SEND_SOCKET_MESSAGE
          ) {
            socket.send(JSON.stringify(action.payload));
            return;
          } else if (action.type === types.USER_LOGGED_OUT) {
            socket.close();
          }
          next(action);
        }
      default:
        next(action);
        break;
    }
  };
};

Это не работает, но не могли бы вы указать мне правильное направление? Спасибо.