Solved

Use Redux in combination with App bridge

voidzero
Shopify Partner
5 1 1

Hello.

 

I have created a React app with Next.js, Polaris, App Bridge and Redux.

 

Problem is, App Bridge already use redux so i can't debug my store at all. What is the proper way to use a store in this case ? should i use App Bridge's one and how could i do it ?

Accepted Solution (1)

voidzero
Shopify Partner
5 1 1

This is an accepted solution.

Was my bad, was not using Remote Redux Dev Tools properly, now both stores are displayed.

View solution in original post

Replies 2 (2)

voidzero
Shopify Partner
5 1 1

This is an accepted solution.

Was my bad, was not using Remote Redux Dev Tools properly, now both stores are displayed.

sohailbukhari
Visitor
2 0 3

hey, can you show me the config file how you make them work. Its not working in my application

 

import App from "next/app";
import Head from "next/head";
import { AppProvider } from "@Shopify/polaris";
import "@Shopify/polaris/dist/styles.css";
import translations from "@Shopify/polaris/locales/en.json";
import { Provider } from "@Shopify/app-bridge-react";
import Cookies from "js-cookie";
import ClientRouter from "../components/ClientRouter";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import { Provider as ReduxProvider } from "react-redux";
import store from "../app/store";
import "./style.css";

import React from "react";

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>Shopdev Swatch App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <ClientRouter />
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <ReduxProvider store={store}>
                <Component {...pageProps/>
              </ReduxProvider>
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

export default MyApp;