Usando o cabo de ação com reagir

Dakota Lillie Blocked Desbloquear Seguir Seguindo 8 de janeiro de 2018

Para um projeto recente, fiz um aplicativo de bate-papo com um front-end do React e um back-end da Rails API com o objetivo de me familiarizar com o WebSockets e a ferramenta do Rails para implementá-los, a Action Cable. Infelizmente, isso se mostrou mais difícil do que o esperado – embora não haja escassez de tutoriais sobre o Action Cable, quase todos eles presumem que o leitor esteja trabalhando em um ambiente Rails com pilha completa. Os poucos que eu encontrei que pretendiam mostrar como integrar o Action Cable com o React integraram o React into Rails diretamente (usando as gemas react -rails ou react_on_rails ) ou eram tão complicados ou dependentes de bibliotecas estranhas que era difícil acompanhar.

Eu senti que tinha tropeçado em um "buraco na internet", por assim dizer … incapaz de encontrar quaisquer tutoriais que se relacionavam diretamente com o que eu estava tentando fazer, eu tive que juntar minha solução de uma variedade de fontes diferentes. Espero que, ao escrever isso, eu possa ajudar a tornar o processo mais fácil para aqueles que o seguem.

Antes de começarmos, devo observar que estou executando o Rails 5.1.4 e o React 16.2. O código finalizado para este tutorial está disponível aqui (backend) e aqui (frontend) , e você pode conferir o produto finalizado no Heroku . Vamos começar!