I have 3 React Applications(3 Micro-Frontends) built with webpack and module federation that comunicate with each other.
I can share components and a redux state with no problems. One of the three applications is the one that makes my API calls using some React hooks like useEffect, useState etc. The problem is that this micro-application never really makes the API calls as if the React hooks can't comunicate and send the response to the other micro applications.
Does anyone have a solution for this problem?
Related
I am building a simple real time messaging app using react and socket.io for practice.
Current solution uses React's Context only to store socket.io object and React-Redux to store the rest.
The reason that I'm using the context alongside the redux is because redux cries for the following error when I try to store socket.io object into its state.
I also thought of using an exported socket.io module instead of the Context:
import io from "socket.io-client";
const socket = io(URL);
socket.connect();
export socket;
but did read some thread saying that it is not a great practice of using React ecosystem.
Any inputs, please?
It is absolutely fine to use Redux for state management and Context for dependency injection like you are doing here.
That's exactly what each of these were made for.
I am also working on a real-time chat widget project here in my company, and one thing I will suggest you is, while using react, it is all up to you what are you using and where because react is a library. but keeping one thing in mind your components must be scalable. I made my widget using svelte and managed the Web Sockets using event handlers.
you should give it a try.
one file with all the socket code and event listeners attached to them
2nd file with the custom events written which will invoke the socket operations from 1st file.
How to monitor the network request react application makes and best ways to avoid duplicate calls in the react app.
Im using react-redux with hooks and also context api.
I'm developing a React component library for a web site. For local development I use Storybook. I think bit can be a good tool (better than npm link) for exporting library components and import them into the web site repo. Now the problem is that I'm using global context for some components but bit components must be isolated and self-sufficient. I don't want to wrap all my tiny components that use global context only to render them on bit.dev!
I have been able to resolve the same problem with storybook using decorators. So, I define a component without wrapping it with a ContextProvider and then in the stories file I use a decorator that wraps my component with the ContextProvider.
Is there a way to wrap bit components with global context provider without wrapping the actual component that will be used in production web site where a single global context provider wrap the entire app? What about best practices about this kind of workflow?
Using global context when implementing reusable components is not recommended.
Not only when using Bit, but when another project consumes a component it needs to have the same exact context for the component to work. Making the component less reusable and attractive to consumers.
The fact that this is not comfortable for rendering examples on the playground in bit.dev is a side-effect for it.
What you can do is either decouple the state from the component and use the params to get state and actions directly, via APIs. Or you can encapsulate the state inside the component.
You can read more about it in Bit's best practices for building reusable components - https://docs.bit.dev/docs/best-practices#state-managers
and also here - https://github.com/Tallyb/reusable-components-styleguide#globals
I have some Question in mind while switching to context API in react js .
What is the advantages of New context API in React js .
Can we use Redux along with context api ?
What are the overcome of context api on redux if any ?
so here is the answers to your questions.
With context react now have builtin support for state management so you don't need third party lib like redux or mobx.
Yes, you can but not required, however, you can use reducers with context to handle complex state management.
Less boilerplate code, especially with hooks and not dependency on third party lib and for small project context, makes it very simple and easy.
If you are looking for example then I created this repo to demo and check other branches to explore more ways of using context.
https://github.com/smkamranqadri/react-hooks-context-todo
Recently I had learnt react-redux, I use it to manage state in my website. But I find some interest in react suspense, but seem like suspense is a feature that killing redux. (Maybe) and might cause problem if using together.
For example, if I want to perform async to change state and update the store. Where should I apply the suspense “feature” and redux store update.
I know my question is a bit confusing but I hope you can understand what I said.
Anyone know how to manage state in react SAP if I want to use react suspense? Is only usecontext is usable?
One way you can use suspense and redux together is by using a Suspense library that integrates with redux like Rest Hooks
Suspense and redux are distinct concepts that can be used independently, or together.
Suspense simplifies asynchronous handling, allowing co-location of data dependencies, which makes components independent from their render location, and thus reusable.
Redux enables one centralized store tree, which can be useful when combining information across desperate concepts in a centralized stream.