Connect your Flutter app’s Redux Store to the Redux Devtools from the web!
I really like Flutter, and I like using Redux when building mobile apps. There’s a great Redux implementation for Dart and Flutter, and a time travel capable debug store.
This article gives a quick overview of how to get setup. The Git repository contains examples to help get you started.
Add the library to your app’s pubspec.yaml:
And add the middleware to your app, and provide it a reference to your store so time travel actions from the remote can be dispatched:
var remoteDevtools = RemoteDevToolsMiddleware('YOUR_HOST_IP:8000');
final store = new DevToolsStore<AppState>(searchReducer,
remoteDevtools.store = store;
Startup the remotedev server, and then run your Flutter app:
npm install -g remotedev-server
remotedev --port 8000
You can then browse to
http://localhost:8000 and start using Remote DevTools to debug your Flutter app!
Encoding Actions and State
Remember that the primary reason for using devtools is to allow the developer to reason about what the app is doing. Therefore, exact conversion is not strictly necessary – it’s more important for what appears in devtools to be meaningful to the developer.
To make your actions and state JSON encodable, you have two options. Either add a
toJson method to all your classes, or using a package like json_serializable to generate the serialisation code at build time. The GitHub search example demonstrates both approaches.
If your store is simple then you may be using
enums for actions. These encode just fine without any extra effort.
If you have configured your app to use the DevToolsStore from
redux_devtools, then you can time travel through your app state using the UI.
Remember that there are limitations to time travel, especially if you are using epics or other asynchronous processing with your Redux store.
Being a new library there are still things to work out. PRs are welcome if you’re up for helping out.
Now go build something cool with Flutter!