ActionCable

channel_channel.rb

class ChannelChannel < ApplicationCable::Channel
  def subscribed
    stream_from "channel_#{params[:channel_name]}"
  end
end

message.rb

class Message < ApplicationRecord
  after_commit { MessageRelayJob.perform_later(self, self.channel) }
  #...
end

message_relay_job.rb

class MessageRelayJob < ApplicationJob
  def perform(message, channel)
    message = Api::MessagesController.render(
      partial: 'api/messages/message',
      locals: { message: message }
    )
    ActionCable.server.broadcast("channel_#{channel.name}",
                                 message: JSON.parse(message))
  end
end

root.jsx

//...
class Root extends React.Component {
  //...
  
  // create some kind of function that creates a socket connection (possibly delete all others) and run that function where needed (onEnter?)
  
  setSocket(channelName) {
    if (window.App.channel) {
      this.removeSocket();
    }
    this.addSocket(channelName);
  }

  removeSocket() {
    window.App.cable.subscriptions.remove(window.App.channel);
  }
  
  addSocket(channelName) {
    window.App.channel = window.App.cable.subscriptions.create({
      channel: 'ChannelChannel',
      channel_name: channelName
    }, {
      connected: () => {},
      disconnected: () => {},
      received: (data) => {
        this.props.store.dispatch(receiveMessage(data.message));
      }
    });
  }
}

FYI it looks like there's a typo here:
Reach should be React

Deploying on heroku requires additional configuration... see https://blog.heroku.com/real_time_rails_implementing_websockets_in_rails_5_with_action_cable