This is my code snippet below :
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import StockApp from '../reducers';
// create a store that has redux-thunk middleware enabled
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
alert("inside production");
export default function configureStore() {
return createStoreWithMiddleware(StockApp);
}
Whenever i try to import remote-redux-devtools it gives me below screen
in case i try to remove remote-redux-devtools import statement everything goes well , please suggest or point out what can be cause when i specify redux dev tool in
as the picture,you should ctrl+c end the server, and re-start, npm run start --reset-cache
Related
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
I'm trying to enable the new LogBox in React Native (v0.62.0-rc.2), I just have to add a line to the "index.js" file but it doesn't work.
RC2 introduces the new LogBox experience behind a feature flag. To try
it out, add the following to your index.js file:
require('react-native').unstable_enableLogBox()
index.js
require('react-native').unstable_enableLogBox();
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Error output:
TypeError: _$$_REQUIRE(_dependencyMap[1], "react-native").unstable_enableLogBox is not a function.
I'm sure I'm doing something wrong, maybe it's not the right way.
you need to do the following:
create a file in the project root title it intro.js
add require('react-native').unstable_enableLogBox(); to intro.js
add import './intro'; at the top of index.js
This worked with me.
Here's how I did it. For some reason imports get resolved super early, which seems to cause the following error:
Error: LogBox must be enabled before AppContainer is required so that it can properly wrap the console methods.
Please enable LogBox earlier in your app.
Move the contents of your entrypoint (usually index.js) to another file (_index.js for example), then require() it from your entrypoint AFTER enabling the logbox:
if(__DEV__)
require('react-native').unstable_enableLogBox();
require('./_index');
import {name as appName} from './app.json';
require('react-native').unstable_enableLogBox();
please write in simple manner I mentioned above please check screen shot for Log box.
First of all, identify where is the main file of your entire app. For example, if you are using a file like Reactotron config file you will put this line before all imports:
require('react-native').unstable_enableLogBox();
Therefore, if you are not using something like Reactotron you will put the above line, before your App import on index.js in the root of project, like this:
require('react-native').unstable_enableLogBox();
...
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name } from './app.json';
AppRegistry.registerComponent(name, () => App);
I hope i've helped! =)
According to the React Native docs this is how you would implement it:
import { LogBox } from 'react-native';
// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all log notifications:
LogBox.ignoreAllLogs();
I did this at the very top of App.js and it worked great.
I want to create a bottom tab navigator and am importing 3 classes. But it doesn't work. The app doesn't throw any errors, but fails to open. It works fine if all classes are in the same file. But I really need to import as the classes are massive. Each individual class is working perfectly.
My code:
import React, {Component} from 'react'
import {createBottomTabNavigator,createAppContainer} from 'react-navigation'
import FriendScreen from './screens/FriendScreen'
import InstructionsScreen from './screens/InstructionsScreen'
import ItemsScreen from './screens/ItemsScreen'
const TabNavigator=createBottomTabNavigator({Game:FriendScreen,Instructions:InstructionsScreen,Items:ItemsScreen},{initialRouteName:"Game"})
export default createAppContainer(TabNavigator)
I've read a number of code segments on the internet, but can't locate the error
The error is that you didn't follow the normal structure defined by react-navigation.
When defining a screen it should be like:
RouteName:{
screen:Component.
}
You TabNavigator should be:
const TabNavigator=createBottomTabNavigator({
Game: {
screen : FriendScreen
},
Instructions: {
screen : InstructionsScreen
},
Items:{
screen : ItemsScreen
}
},
{
initialRouteName:"Game"
})
React Native Debugger app version: v0.8.1
React Native version: 0.57.3
I am getting this error
It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function
It was working before I updated from 0.55.
This is how I create my store.
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';
const store = createStore(
reducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
compose(applyMiddleware(thunk)),
);
export default store;
It works fine when I use Chrome to debug.
Please help, thanks
Instead of passing three arguments to the createStore function, you need to pass two (one of them is meant for a preloaded state, something we are not using here). To get around that, while still using the redux dev tools, you need to use the dev tools as the composer itself:
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancer(applyMiddleware(thunk)),
);
export default store;
I realised this was the solution after digging around the redux library's, the debugger app's, and the dev tool's source code, and found this section: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
I also saw an almost identical issue on github which I assume is yours, but I thought I would post the answer again here in case someone sees it here.
Hope this helps!
Because I had the same problem and wanted to use redux-devtools-extension the provided solution here could not be applied 1:1. How ever this one tuned out to do the job:
import { applyMiddleware, combineReducers, createStore } from 'redux';
import appConfigReducer from '../reducers/appConfigReducer';
import logger from 'redux-logger'
import { composeWithDevTools } from "redux-devtools-extension";
const rootReducer = combineReducers(
{config: appConfigReducer}
);
const composeEnhancers = composeWithDevTools({
// options like actionSanitizer, stateSanitizer
});
const configureStore = () => {
return createStore(rootReducer,
composeEnhancers(applyMiddleware(logger))
);
};
export default configureStore;
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.