Interacting with redux-toolkit from Flutter wrapper

Viewed 70

I'm working on an app and we have a website with a React frontend and a Flutter wrapper in order to be able to view in an app on mobile (IOS/Android)

We're using the library Flutter WebView Plugin for the wrapper. We're using the flutterWebviewPlugin.evalJavaScript() function in order to pass some permission information from the phone to the website and based on that information, I need to be able to update the redux state. While I can display an alert with the data from mobile, I can't seem to pass pass it to the redux state. I'm thinking that some the code is being ran by injection that the references to the store/dispatch may not exist?

I don't have the exact flutter code, but it's something like what is shown in the link

Future<String> loadJS(String name) async {
  var givenJS = rootBundle.loadString('assets/$name.js');
  return givenJS.then((String js) {
    flutterWebViewPlugin.onStateChanged.listen((viewState) async {
      if (viewState.type == WebViewState.finishLoad) {
        flutterWebViewPlugin.evalJavascript(js);
      }
    });
  });
}

Here is the code that receives the message from flutter

// Tried line imports... see below
// import store from "../store";
// import { flutterTest } from "slices/location";

function fromFlutter(data) {
   //Tried to see if inline imports would help
   const store = await import('../store');
   const {flutterTest} = await import('slices/location')

   // Works
   alert(JSON.stringify(data))

   // Doesn't work
   store.dispatch(flutterTest(data))
}

Here is the reducer for redux-toolkit (just alerts the message)

flutterTest: (state, {payload}) => {
      alert("flutter test 5 ran")
      alert(JSON.stringify(payload))
    }

Basically, my question is how do I interact with my React redux state from the Flutter wrapper?

Thanks for your help, everyone!

0 Answers
Related