@sophonz/react-native-redux

[!IMPORTANT]

This module requires both the React Native Sophonz SDK and the React Native Sophonz Tracer Provider.

This package uses Sophonz's React Native SDK and OpenTelemetry Tracer Provider to collect telemetry around dispatching actions with Redux. It provides a custom middleware that can be configured with your Redux store.

Install the component

npm:

npm install @sophonz/react-native-redux

yarn:

yarn add @sophonz/react-native-redux

Add the middleware

With hooks

import {useEffect, useState} from "react";
import {EnhancedStore, configureStore, Tuple} from "@reduxjs/toolkit";
import {useSophonz} from "@sophonz/react-native";
import {useSophonzNativeTracerProvider} from "@sophonz/react-native-tracer-provider";
import {useSophonzMiddleware} from "@sophonz/react-native-redux";

const MyApp = () => {
  const {isStarted} = useSophonz({ios: {collectorUrl: "https://in.sophonz.ai", appKey: "sk_..."}});
  const {tracerProvider} = useSophonzNativeTracerProvider({}, isStarted);
  const {middleware} = useSophonzMiddleware(tracerProvider);
  const [store, setStore] = useState<EnhancedStore>();

  useEffect(() => {
    if (middleware && !store) {
      setStore(
        configureStore({
          reducer: rootReducer,
          middleware: () => new Tuple(middleware),
        }),
      );
    }
  }, [middleware, store]);

  ...

};

Without hooks

import {configureStore, Tuple} from "@reduxjs/toolkit";
import {initialize} from "@sophonz/react-native";
import {SophonzNativeTracerProvider} from "@sophonz/react-native-tracer-provider";
import {createSophonzMiddleware} from "@sophonz/react-native-redux";

const setupStore = async () => {
  await initialize({sdkConfig: {ios: {collectorUrl: "https://in.sophonz.ai", appKey: "sk_..."}}});
  const tracerProvider = new SophonzNativeTracerProvider();
  return configureStore({
    reducer: rootReducer,
    middleware: () => new Tuple(createSophonzMiddleware(tracerProvider)),
  });
};