Как лучше всего передать поток данных по приложению React, используя tmi API twitch? - PullRequest
Новая
       40

Как лучше всего передать поток данных по приложению React, используя tmi API twitch?

0 голосов
/ 12 января 2019

Я бы хотел собрать данные чата с использованием API tmi и добавить некоторые цифры в данные для развлечения. API позволяет получать события чата с помощью обратного вызова в форме:

client.on("chat",(...) => {...})

Концептуально, я намереваюсь передать каждое сообщение чата в окно чата и анализатор данных с отслеживанием состояния, из которого два графика будут получать обработанные данные. Эти детали могут быть изменены по мере продолжения, но я подозреваю, что между этими частями могут возникнуть концептуальные отношения родитель-потомок (например, оба графика будут извлекать данные из анализатора данных, а не в виде необработанного сообщения чата).

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

Это легко сделать, но кажется, что требуется неловкое связывание 'this', и даже тогда, так как родительские компоненты не могут общаться (?) С дочерними компонентами (например, с помощью открытых методов), мне пришлось сбросить все детская логика / состояние в родителя. Очевидно, это не идеально, но я вижу единственный способ избежать громоздкого перевода моей простой концептуальной модели в эквивалентную, совместимую с React.

В частности: я сбросил логику / состояние addMessage ChatBox внутри компонента App, поскольку я регистрирую App в качестве прослушивателя событий в методе componentDidMount. Это работает как хотелось бы, но я потерял предполагаемую модульность компонентов. Если я вместо этого зарегистрирую ChatBox непосредственно в качестве обработчика событий, я получу возможность сохранить материал addMessage в ChatBox, но каждый компонент, которому нужны данные чата, должен будет быть независимо зарегистрирован, что кажется неэффективным (?).

У меня вопрос: есть ли способ «наилучшей практики» для непосредственной реализации моей концептуальной модели, или мне нужно начать думать по-другому, чтобы использовать React? 

class ChatBox extends React.Component {
  render() {
    ... stuff based on props ...
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    var client = new tmi.client(props.options);
    // messages and position should be ChatBox state
    this.state = {messages:[], position:0, client:(client)};
  }

  componentDidMount() {
    this.state.client.connect();
    var _this = this; // Awkward 'this' binding
    this.state.client.on("chat", (channel, userstate, message, self) => {
        // Don't listen to my own messages..
        if (self) return;
        _this.addMessage({username:userstate.username,message:message});
    });
  }

  addMessage(message) {
    this.setState((state, props) => {
      // ... stuff ...
      return {messages:messages, position:position}
    })
  }

  render() {
    return <ChatBox messages={this.state.messages} />
  }
}

ReactDOM.render(<App options={options} chatLength={10}/>, document.getElementById('root')
);
...