Hi there 👋
I'm Jun Kai. I’m a full stack developer, currently living in Johor, Malaysia. Right now I’m building the world's most advanced education platform at Mindvalley. Let’s grab a coffee ☕️.
Flipper plugin for Redux in React Native
License: MIT License
Hi there 👋
I'm Jun Kai. I’m a full stack developer, currently living in Johor, Malaysia. Right now I’m building the world's most advanced education platform at Mindvalley. Let’s grab a coffee ☕️.
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!
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?
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!
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?
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!
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
?
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.
Currently, this plugin is using plain JSON.stringify()
which does not object references.
Use cycle.js
to stringify json object.
After every action you need to select the last action, it would be good if that happened automatically.
Thanx
Hinders in the release apk building process
but when making a release build-out of android it causes failure to make a build!
Hi,
are there any plans to support time travel debugging similar to how redux-devtools do it?
Thanks in advance :)
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!
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,
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!
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
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
Maybe related to #46
In dark mode now looks like this
I recently installed boilerplate v3.7.2 where under the bonnet are already imported:
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:
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
TypeError: Cannot read property 'type' of undefined
at ReduxViewer.buildRow (/Users/zacdemi/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:872:81)
at /Users/zacdemi/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:892:42
at Array.map (<anonymous>)
at ReduxViewer.render (/Users/zacdemi/.flipper/thirdparty/flipper-plugin-redux-debugger/dist/bundle.js:892:28)
at qi (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:71628)
at pi (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:71427)
at gl (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:112555)
at bk (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:98507)
at ak (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:98435)
at Tj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:98298)
at Lj (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:95289)
at file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:44912
at e.unstable_runWithPriority (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:55:3794)
at gg (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:44689)
at jg (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:44857)
at ig (file:///Applications/Flipper.app/Contents/Resources/app/bundle.js:53:44792
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.