mobx-action-flipper

React Native Mobx Action Debugger

React Native middleware for MobX Action debugging with Flipper.

Installation

1. Install mobx-action-flipper middleware and react-native-flipper in your React Native app:

yarn add mobx-action-flipper react-native-flipper
# for iOS
cd ios && pod install

2. Middleware configuration:

Note: this function should be called only once at app startup. Further calls will have no effect.

import {debugMobxActions} from 'mobx-action-flipper';

// MobX stores:
const firstStore = new FirstStore();
const secondStore = new SecondStore();

// Any number of stores can be passed in as an object:
debugMobxActions({firstStore, secondStore});

If your MobX stores are persisted via AsyncStorage, pass AsyncStorage as the second argument to be able to wipe persisted MobX data from Flipper:

import {debugMobxActions} from 'mobx-action-flipper';
import AsyncStorage from '@react-native-async-storage/async-storage';

// MobX stores:
const firstStore = new FirstStore();
const secondStore = new SecondStore();

debugMobxActions({firstStore, secondStore}, AsyncStorage);

3. Install flipper-plugin-mobx-action-debugger in Flipper desktop client:

Manage Plugins > Install Plugins > search "mobx-action-debugger" > Install

4. Start your app and you should be able to see the debugger in Flipper.

Acknowledgement

This plugin was forked from mobx-flipper.