I recently installed boilerplate v3.7.2 where under the bonnet are already imported:

• redux v6.0.0
• flipper v0.202.0
• redux-flipper v2.0.2

in redux store:

if (__DEV__ && !process.env.JEST_WORKER_ID) {
            const createDebugger = require('redux-flipper').default;

            console.log('+++ redux', createDebugger); // showing: +++ redux [Function createDebugger]
            middlewares.push(createDebugger());

            middlewares.push(logger()); // redux logger
        }

So after all procedure I installed flipper (v0.202.0) also Install flipper-plugin-redux-debugger (v2.0.2) in Flipper desktop client. Then I see redux-debugger in intalled list but I don't see in right bar where Enabled:

I need a help! Why redux-debugger installed but not showed in Enabled list bar?

Additionally: When I change dark theme state I see by redux logger actions in logs:

Hey,

I believe that there is a bug when you try to dispatch an action with a string payload button. Looks like this:

Otherwise, great tool, thank you for that! It's running for many of our devs the whole day during development 😊

I'm using Flipper 0.39.0 on Linux with Android on an Emulator and I think I have enabled all the required initialization. But the Flipper Redux Debugger Pluing does not get listed and in the Flipper debugger console I see the following error:

Error: Feature not implemented
    at getUser (user.tsx:13)
    at e.default (user.tsx:17)
    at index.tsx:51
    at Array.map (<anonymous>)
    at _default (index.tsx:51)
    at init.tsx:109
    at Object.rehydrate (persistStore.js:82)
    at _rehydrate (persistReducer.js:61)
    at persistReducer.js:90
(anonymous) @ user.tsx:23
Promise.catch (async)
e.default @ user.tsx:21
(anonymous) @ index.tsx:51
_default @ index.tsx:51
(anonymous) @ init.tsx:109
rehydrate @ persistStore.js:82
_rehydrate @ persistReducer.js:61
(anonymous) @ persistReducer.js:90
Promise.then (async)
(anonymous) @ persistReducer.js:89
Promise.then (async)
(anonymous) @ persistReducer.js:84
combination @ redux.js:458
dispatch @ redux.js:212
persist @ persistStore.js:114
persistStore @ persistStore.js:123
(anonymous) @ init.tsx:106
loadModuleImplementation @ require.js:323
guardedLoadModule @ require.js:212
metroRequire @ require.js:130
(anonymous) @ reduxDevToolsConfig.tsx:37

After every action you need to select the last action, it would be good if that happened automatically.

Thanx

Problem

Currently, this plugin is using plain JSON.stringify() which does not object references.

Proposed solution

Use cycle.js to stringify json object.

Related Issue

jk-gan/redux-flipper#14

I'm trying to integrate redux-flipper plugin But I'm getting the following error:

I installed the plugin on flipper desktop app. I also installed redux-flipper: ^2.0.2 and react-native-flipper: ^0.162.0 into the app. I added the plugin to middleware array:

const createDebugger = require("redux-flipper").default
middlewares.push(createDebugger())

Could you help please?

It seems this is now possible: facebook/flipper@993249e

Thanks for the awesome plugin!

Thanks for plugin.I'm getting the following error on version 1.1.0

TypeError: Cannot read property 'nativePerformanceNow' of undefined

version 1.0.1 works fine

• RN 0.62.2
• flipper 0.39.0

Maybe related to #46
In dark mode now looks like this

It's quite difficult to read the diff in Flipper dark mode:

Just a heads up that the plugin shows up like this in the installation screen:

I'm not sure where it gets that value from but I assume you'll know and might want to give it a different description.

redux-thunk async actions can show duration in hundreds of milliseconds, while directly benchmarking the reducer functions for this actions shows ~1-2 milliseconds. How is duration measured for actions generated from redux-thunk thunks?

The creation of copyText in buildRow (by JSON.stringify-ing the Redux state) is pretty slow, and can lead to some minor performance issues when it's done over and over for every dispatched action. I was originally going to suggest that copying the state should be moved to a button in the sidebar or something so it could the JSON.stringify could be done lazily, but Flipper 0.46.0 was just released, and it now allows users of SearchableTable to pass in a function for copyText instead of a string (also so that the actual copy-able text is created lazily).

I can put up a PR for whatever changes need to be made here, but I wanted to ask first: would it be better to turn copyText into a function so that copying rows works the same, or would it be better to move adding the state to the clipboard into a new button, so the plugin is compatible with previous versions of Flipper?

From the code side I dispatch my action like this

    dispatch({
        type: DO_SOMETHING,
        payload: {
            foo: 'cat',
            bar: 'dog'
        }
    });

When I try to dispatch this action with a payload from the flipper plug in

{
    'foo': 'cat',
    'bar': 'dog'
}

It tells me undefined is not an object and pin points me to action.payload.foo. So I assume the payload is not passed from the plug in. How do I give it a payload?

Hi,

are there any plans to support time travel debugging similar to how redux-devtools do it?

Thanks in advance :)

hello @jk-gan , thanks for taking your time and developing this plugin. I'm getting the following error following your configuration.

if (__DEV__) {
  const createDebugger = require('redux-flipper').default;

  let reduxDebugger = createDebugger();
  let store = createStore(RootReducer, {}, applyMiddleware(reduxDebugger));
} else {
  let store = createStore(RootReducer, {});
}

I solved it just by changing how to import createDebugger to import createDebugger from 'redux-flipper'; The rest is the same.

Thanks,

Hi,

In my app we store a lot of data in the State Tree and, since the plugin displays it expanded by default, Flipper gets very slow and laggy after displaying few logs.

My suggestion is to display the State Tree collapsed by default instead of expanded, it will improve its performance and also make it easier to go directly to a specific object.

You can check my Pull Request #18

Great plugin, btw!

The 0.62.0 release of Flipper throws the following error when running React Native 0.63.3 on an iOS 14 simulator:

TypeError: Cannot read property 'type' of undefined
    at ReduxViewer.buildRow (/Users/mb/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:872:81)
    at /Users/mb/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:892:42
    at Array.map (<anonymous>)
    at ReduxViewer.render (/Users/mb/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:892:28)
    at gi (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:70042)
    at fi (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:69837)
    at $r (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:105595)
    at Qj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:96846)
    at Kj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:96771)
    at yj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:93806)
    at file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:45426
    at e.unstable_runWithPriority (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:55:3870)
    at cg (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:45135)
    at fg (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:45371)
    at gg (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:45306)
    at Mj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:94095)

Complex applications are using redux store instancing. That's a very powerful redux feature.
Would be great if flipper-plugin-redux-debugger will support it.
For instance, in React Native Debugger you can switch between the stores using a dropdown.

import {configureStore} from '@reduxjs/toolkit'
import counterSlice from "./reducers/counterSlice";

let middleware = [];

if (__DEV__) {
  const createDebugger = require('redux-flipper').default;
  middleware.push(createDebugger());
}

export const store = configureStore({
  reducer: {
    counter: counterSlice
  },
  middleware
})

"react-native-flipper": "^0.96.1"
"redux-flipper": "^1.4.2"
"react-native": "0.64.1"

environment:

System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 66.96 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.0.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/Documents/realnote_app/node_modules/.bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.2, 29.0.3, 30.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7322048
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1

I want to sort actions by duration to highlight the slowest ones, but instead they are sorted alphabetically

Hinders in the release apk building process

1. add the flipper redux and this FPRD plugin as a dev dependency
2. build as a staging scheme/flavors. all works fine on both OS

but when making a release build-out of android it causes failure to make a build!

Flipper version: 0.63.0
RN version: 0.63.3

When focusing on a redux action, the expandable action/state windows get docked to the bottom and are not scrollable.
This is inconsistent, as sometimes it will dock to the right side, but I have a very hard time figuring out what determines that to happen.

Expected behavior:
These windows dock to the right side and are scrollable.

Example image of undesired behavior (action/state window docked at bottom - collapsed state)

Please let me know what other info I can provide for you, or what I can do on my end to resolve this issue.
Thank you!

Flipper version: 0.64.0
RN version: 0.63.3

I am working with a somewhat complex react native app, but sometimes the redux logs can get several minutes behind!

Under Flipper Degug logs, I see this message many times:
Plugin flipper-plugin-redux-debugger took too much time while doing background: 44ms. Handling background messages should take less than 25ms.

I'm wondering if there is anything I can do to fix this lag? Let me know if I can provide any other information.

Thank you!

Package.json

    "react-native-flipper": "^0.37.0",
    "redux-flipper": "^1.2.0",

index.js

let middlewares = [thunk];

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  const debug = createDebugger();
  middlewares.push(debug)
  
}

const store = createStore(rootReducer, applyMiddleware(...middlewares));

Any help would be appreciated!