In my application I want to use Dixie.js to read/write data into IndexDB from my Webworker & Dixie Observable to listen event from main thread (React functional component which uses hook) instead of worker postMessage.
Dixie.js documentation is very clear but Dixie Observable documentation is not that clear
https://www.npmjs.com/package/dexie-observable
Provided code sample not working from React. I will appreciated for any help/input.
Thanks!
Look at this page instead: https://dexie.org/docs/dexie-react-hooks/useLiveQuery()
Dexie.Observable is something else.
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.
I'm trying to implement the Agora screen share functionality in react, but nothing I do seems to work, destructuring the screen share hook will automatically invoke the function. How do I implement the functionality and what am I supposed to target when client.publish is called?
How do I use webworkers in a react app ?
I wrote an webworker and tested it in a simple app (html) so it works fine.
But using same approach in a react app doesnt work
I don't want at first use any react-something-webworker, I want just use pure Work api
const _worker = new Worker('./worker')
seems not importing the code inside worker.js file (self.addEventListener("message...)
Thanks for helping
In a React class component you can instantiate a web worker in componentDidMount, define the worker's onmessage and onerror methods, then call worker.terminate() in componentWillUnmount.
In a React function component, replace componentDidMount and componentWillUnmount with useEffect.
Your React component and your worker can then exchange messages with postMessage.
Even if you don't want to use any React-specific libraries, have a look at the code from the react-hooks-worker library. It's less than 100 LOC and it will help you understand how to use the Web Worker API.
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
So far I can only find descriptions of how to use the Context API, but not how it works, especially how consumer components are triggered to re-render. Links to source code would be awesome!