I'm using Chrome Redux Dev Tools to help debug my react app's Redux store. I added a new dependency, react-beautiful-dnd, which apparently uses redux, because now instead of my single store showing up in Chrome Redux Dev Tools, I also see stores for React Beautiful dnd.
I'd prefer not to see these at all, because now every time I want to go to my store, I have to manually select it from a list.
Is their anyway to keep react-beautiful-dnd as a dependency in my project, but prevent it from showing up in Chrome Redux Dev Tools?
Perhaps there's some kind of config file that controls the visibility of the store? Or a setting within Redux Dev Tools that controls which stores are visible?
What Chrome Redux Dev Tools currently looks like for me:
Turns out you can do this, certainly with EasyPeasy, which I assume means you could do it with Redux. EasyPeasy provides a devTools prop for EasyPeasyConfig:
const store = createStore(model, {devTools: false});
store.addModel('todos', {
items: ['Buy shoes'],
});
store.getState().todos.items; // ["Buy shoes"]
As per the Store Config docs, if process.env.NODE_ENV !== 'production' then by default devTools = true.
The store no longer appear if devTools = false.
But I'm still not sure how to disable a store which is in a dependency.
Related
I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:
https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.
So, how to disable SSR "completely"?
While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).
Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.
I am exploring the development with Web Components, more specifically, it's Fast. However, it would take a long time to rebuild the project and refresh the page, then verify for the CSS modification. Is there any CSS hot reload solution for the Web components(Fast)? (I am using Webpack)
There is no out-of-box solution for HMR with Web Components in General. It really depends on how you are using Web Components. Are you relying on just Custom Elements and using CSS-in-JS with it or fully using ShadowDOM with encapsulated styles and the underlying framework to declare those styles.
You can consider building your own HMR driver. To do this, you need all the three things in order for enable HMR - the bundler (assuming Webpack already has it), the server (webpack's dev server or middleware) and your own application.
In you own application, you would add the driver as:
// RUN SOME BOOSTRAPPING CODE
// HMR interface
if (module.hot) {
// Capture hot update for a particular module
module.hot.accept("./style.css", () => {
// Logic to remove old stylesheet
});
}
If you look at the above code, you can notice that it is almost impossible to change StyleSheet if it is defined within the shadow root for each component. If you have some global CSS which gets added to top Document then it simpler to implement HMR by manipulating StyleSheet objects from the javascript. At least, you will get partial HMR. For other activities, you can fall back to automatic full page refresh.
Is there are redux-logger type of functionality for Apollo / Graphql? Something that console.logs changes to application state and state of the cache when changes are made? I'm working with Expo.io and React Native, and haven't been able to get any of the normal devtools working. However, logging to the console is simple and reliable enought to work in all situations.
Apollo 2.0 has the concept of links for this kind of use case, there are several logging links on npm:
apollo-link-logger
apollo-link-logging
But it should also no be so hard to write your own
I am using Meteor with React. I am using Kadira flowrouter-ssr as my router.
It's so weird. None of my components get their componentDidMount() called.
I found a question which seems like the same issue.
I think React only uses getInitialState() & render() to compile to create the html.
It's weird because it was working before and I deployed a new version, didn't update anything and it stopped working. All I did was add a couple of components.
It works on my local machine so I am sure it's something to do with how it's being compiled.
Other than that I am blank. I have no idea what's up with this.
When using Firebase on ReactNative, it will show such error message:
can't find variable process
However, if I require firebase/lib/firebase-web.js manually, it will show:
can't find variable document
How can I resolve this?
I just went through the same issue while trying to use sockets.io in my react native app so hopefully I can help.
The reason that you cannot use firebase's node module is because there hasn't been a polyfill created yet for websockets support (which firebase is dependent on) in react native.
If you take a look at issue #619 in react native's repo you'll find the current discussion on creating a websockets api polyfill.
The way that we solved it is by using Jason's modified version of the sockets library and creating our own repo around just that file. Then we added the line below to our package.json dependencies.
"react-sockets": "crewapp/react-native-sockets-io"
The reason that Jason's version of the sockets.io client file works is because react-native is added as a user agent. You can find the code that makes this change at the top of the file:
window.navigator = {
userAgent: "react-native"
}
Once you've gone through these steps you should be able to require sockets.io / firebase as normal.
Just figuring it our. Pavan's answer is helpful, but it is not quite true when using with Firebase.
For firebase, please follow the steps:
Download the firebase-debug.js from wsExample. Or you can just install wsExample by npm and require the firebase-debug.js inside it.
Use badfortrains's forked React-Native:
"react-native": "git://github.com/badfortrains/react-native#WebSocket"
New the Firebase like this:
var firebase = require("../../firebase-debug.js");
var rootRef = new Firebase(Const.FB_ROOT);
Things should just work now!
I had issues with socket.io on React Native too, solution was to get notifications about new data and if data is big enough - get it by simple RESTfull request. in my case data was small enough to be sent all within notifications API.
I was using GCM service to send notification to phone from nodejs server. BTW, it uses less battery then socket connection and works great :)