This question has been asked before but I cannot find a working solution so I'm taking the liberty to show my code in case I am missing something. I have a react native app and using redux. I have been using remote-redux-devtools for two months on this project now, but the tool stopped working all of a sudden. I receive a "SocketProtocolError" in the console and will paste that below as well as my code.
Redux store
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import thunk from "redux-thunk";
import reducers from "../../State/reducers/index";
const composeEnhancers = composeWithDevTools({ realtime: true });
const store = createStore(
reducers,
{},
composeEnhancers(applyMiddleware(thunk))
);
export default store;
In my package.json file I am using "remote-redux-devtools": "^0.5.13"
This is the error I get in the console.
Any help would be greatly appreciated!
I fixed the same error when debugging an app on my phone by running:
adb reverse tcp:5678 tcp:5678
to allow the phone to connect to the devtools. Adjust the port number if using a different one. If you're running the app in an emulator on your computer, this probably won't help.
Related
Recently I ejected a Managed Workflow project and now I’m on Bare Workflow, things were going pretty good until now.
I was able to add native libraries and are working OK such as segment’s analytics-react-native and I’ve created a build for both iOS and android devices to run the dev client (instead of Expo Go). But now I wanted to add a composerEnhancer to see my store on react-native-debugger app and after setting it up I just get “no store found. Make sure to follow the instructions” on a browser tab.
import { combineReducers, createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import ReduxThunk from "redux-thunk";
const rootReducer = combineReducers({
auth: authReducer,
cart: cartReducer,
});
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(ReduxThunk)
)
);
return (
<Provider store={store}>
<Navigation />
</Provider>
);
}
I tried same config in a Bare workflow with Exgo Go Client and it’s working fine. But I can’t make it work on Custom Dev Client, any thoughts?
Almost all of the questions out there are related to redux middleware but none points to one related to redux-toolkit. As suggested by this document I created a store as below
import {configureStore} from '#reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';
import cookieReducer from '../features/cookie/cookieSlice';
const store = configureStore({
reducer: {
auth: authReducer,
cookie: cookieReducer,
},
devTools: true, // This should automatically enable Redux DevTools
});
export default store;
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Then I ran the application in debug mode and in 'Redux' dev tools extension tab I do see this!
I assume the redux toolkit does the auto configuration for Redux Dev Tools as the doc states. Did I miss any additional configuration in code or in Redux Dev Tools configuration ?
Your help is greatly appreciated.
I try to debug an application with Reactotron in a (IOS) React Native project but there is "No Activity" when I run my application.
I work with react-native 0.55.4, reactotron 2.1.0 (same in my package.json)
TimeLine Reactotron
My reactotronConfig.js
index.js file where reactotron is imported
reactotron in my package.json
You have to do the following:
enter on CLI: adb reverse tcp:9090 tcp:9090
add this to a file (e.g lib/Reactotron.js):
import Reactotron, { asyncStorage } from 'reactotron-react-native';
Reactotron
.configure() // controls connection & communication settings
.useReactNative(asyncStorage()) // add all built-in react native plugins
.connect();
import the File in your app.js:
if (__DEV__) {
import('../../lib/Reactotron').then(() => console.log('Reactotron Configured'));
}
Note: If you wan't to use host Prorperty inside of configure(), be sure to use 127.0.0.1. In my case other IP (even if local like 192.x.x.x) doesn't work.
After that, you connection should work, and you can use Reactotron like described in the Docs.
HINT:
For Linux & Mac, you can add this to package.json (script-section) (adjust the path & call of your reactotron-app to your needs):
"scripts": {
...
"reactotron": "adb reverse tcp:9090 tcp:9090 && /opt/Reactotron/reactotron-app",
...
}
I did this adb reverse tcp:9090 tcp:9090 that I got from Suther and yarn start --reset-cache and it worked.
First of, you are not assigning the configured Reactotron object to your console.tron value. You need to do something like this:
console.tron = Reactotron.configure({ ...
Looking at your reactotronConfig.js file I notice that you are sending it to localhost. This will only work when running on the simulator (not sure if that is what you are doing).
If you want to run it on a device, you will need to give it your packager's ip address. A neat way of doing that is to use the following code:
import { NativeModules } from 'react-native';
let packagerHostname = "localhost";
if (__DEV__) {
const scriptURL = NativeModules.SourceCode.scriptURL;
packagerHostname = scriptURL.split("://")[1].split(":")[0];
}
const reactotron = Reactotron.configure({
name: "myAPPILOC",
host: packagerHostname
});
console.tron = Reactotron;
Please enable debug mode ( Press ⌘+D on iOS simulator, ⌘+M on Android emulator, or shake real devices). Then kill app and restart app.
I hope it's help
What I can recommend and what has worked for me is to install these version packages:
"reactotron-react-native": "3.5.0",
"reactotron-redux": "3.1.0",
Then you will need to configure your store accordingly:
import {createStore, applyMiddleware, compose, combineReducers} from 'redux';
const appReducer = combineReducers({
...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));
const store = createStore(appReducer, composeEnhancers(middleware, Reactotron.createEnhancer()));
Now of course, the above is my setup but you will need to tweak yours accordingly, the main point being follow the Configuration as documented here:
https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md
Need help in setup Redux devTools for react-native
I have very simple reducer and createStore here, and I try to incorporate redux-devtools-extension, so I can debug my react-native
app, but I got "store no found" in Redux tab
import { createStore, applyMiddleware} from 'redux'
import {reducer} from "./reducers"
import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-
extension'
let store = createStore(reducer, devToolsEnhancer());
export const reducer = (state=[], action) => {
switch(action.type) {
case "ADD_MEMBER":
return [...state, {categoryID: 0, name: "Bill", zip: "27733", id: 4}]
default:
return state
}
return state;
}
Redux DevTools Extension cannot access the React Native worker, as extensions cannot inject code into web workers. You have to use remote-redux-devtools to communicate with the extension via websockets.
You'll have just to replace
import { devToolsEnhancer } from 'redux-devtools-extension'
with
import devToolsEnhancer from 'remote-redux-devtools';
Then from the extension context menu, click on "Open Remote DevTools". By default it'll use its remote server for quick bootstrapping, but it's recommended to run your local server by installing and running remotedev-server. It's similar to how you have to install and run react-devtools package for React Native.
Another option is to use React Native Debugger.
The win is, you don't have to npm install redux devtools every time. The debugger provides you the good old "REDUX_DEVTOOLS_EXTENSION" out of the box.
So, if you are reusing code from web, you do not need any code changes. The same set up as redux devtools extension will just work.
For a thorough guide on how to setup React Native Debugger with an Expo app look here. (As the official docs are a bit confusing.)
I'm new to react native and reactotron.
I want to monitor axios HTTP request, but I can't.
In my idea, networking = XMLHttpRequests, apisauce = axios.
below is my code.
// Reactotron.config
import Reactotron, { networking } from 'reactotron-react-native'
import apisaucePlugin from 'reactotron-apisauce'
Reactotron
.configure()
.useReactNative(networking())
.useReactNative(apisaucePlugin())
.connect()
//App.js
import './config/ReactotronConfig';
import Reactotron from 'reactotron-react-js'
// I tried import Reactotron from 'reactotron-react-native'
api.addMonitor(Reactotron.apisauce)
What is wrong?
If monitoring axios requests is the only purpose you want to solve.
I suggest you make your requests global.
Add this line in your index.js file.
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Now, on your emulator, enable Debug JS Remotely, there you can see all your network requests from the network tab.