Cannot Access Data From ActionCable On React Front-end

I am trying to broadcast Messages that belong to a certain Game from a rails backend using actioncable. In my messages_controller: def create @game = Game.find(message_params[

Solution 1:

I got help from a TCF at my school.

In my messages channel I changed it to:

  def subscribed
    @game = Game.find(params[:id][:game_id])
    stream_for @game
  end

So, stream_for instead of stream_from.

Additionally, I also switched to using the npm package react-actioncable-provider.

My client side javascript is in React and looks like this:

import { ActionCable } from 'react-actioncable-provider';
import React, { Component, Fragment } from 'react';
import { CABLE, AUTH_HEADERS } from '../constants';
import { connect } from 'react-redux';
import Message from '../components/Message';

class Cable extends Component {

  render () {
    console.log("Cable.js")
    return (
      <Fragment>
        <ActionCable
          key={this.props.game_id}
          channel={{ channel: "MessagesChannel", game_id: this.props.game_id }}
          onReceived={(data) => console.log("handleReceived: ", data)}
        />
    </Fragment>
    )
  }
}

const mapStateToProps = state => {
  return { state }
}

const mapDispatchToProps = dispatch => {
  return {
    getMessages: data => dispatch({ type: "LOAD_MSGS", payload: data })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cable);

I am now able to receive and responses from ActionCable.