How do I dispatch actions with the new shopify-app-cli application?

[clucs123]

Hi Trish,

This is my full index.js code. I tried your code but sadly I still get null back. I included a screenshot of the browser console showing what happens when the button is clicked.

Thanks again for the help,

Paul

import React, { Component } from "react";
import { Page, Heading, Button } from "@shopify/polaris";
import { AppBridgeContext } from "@shopify/app-bridge-react/context";
import { Redirect } from '@shopify/app-bridge/actions';

class MyComponent extends Component {
  static contextType = AppBridgeContext;

  redirectToProduct = () => {
    console.log('btn clicked',this.context); // return null
    // The app instance is accessible through the context
    const redirect = Redirect.create(this.context);
    redirect.dispatch(Redirect.Action.APP, "/edit");
  };

  render() {
    console.log('render',this.context); // returns null
    return (
      <Page>
        <Heading>Shopify app with Node and React �</Heading>
        <Button onClick={this.redirectToProduct}>Edit</Button>
      </Page>
    );
  }
}

const Index = () => (
  <Page>
    <MyComponent/>
  </Page>
);

export default Index;