How to use app bridge with my own redux store ?

Highlighted
New Member
1 0 0

Hello,

I've setup my shopify app by following build a shopify app with node and react tutorial.

Currently my _app.js file is;

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import Cookies from 'js-cookie';
import ClientRouter from '../components/ClientRouter';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
    fetchOptions: {
        credentials: 'include'
    },
});

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;
        const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
        return (
            <React.Fragment>
                <Head>
                    <title>Sample App</title>
                    <meta charSet="utf-8" />
             
                </Head>
                <Provider config={config}>
                    <ClientRouter />
                    <AppProvider i18n={translations}>
                        <ApolloProvider client={client}>
                            <Component {...pageProps} />
                        </ApolloProvider>
                    </AppProvider>
                </Provider>
            </React.Fragment>
        );
    }
}

export default MyApp;

 

The problem is I don't know exactly how can i create my own redux store for my own components (not the ones mentioned here app bridge actions) and as well as how can i attach my react-redux Provider component to that store while still relying on app bridge?

Which Provider should cover other -> app-bridge-react Provider or react-redux Provider ?

I believe i should somehow create my own actions for my custom components and should be able to dispatch them through my own part of redux store just like pre-defined actions in app bridge.

I've been looking for this answer for almost a decade but unfortunately I was not able to find any proper example on the web nor under the shopify app developments tutorials.

Could you please help me on this ?

Thanks,

0 Likes
Highlighted
Shopify Staff
Shopify Staff
53 11 19

Hi  

Hope this helps!


Trish

0 Likes