Great point!
So, technically I would use either of these approaches to prevent unnecessary rerenders:
1. Split state in separate BehaviorSubjects
or
2. Pipe your subject through filter like:
useSharedState(subject.pipe(filter(s => s.type === 'test'))) // Let's say your state looks like { type: 'type', content: 'content' }
First off, thanks a lot for your comment! I actually would like to challenge your point about the state modification. BehaviorSubject is more like an action/reducer combo, not the whole state. Remeber, that I argue in the article that we use combineLatest to get the whole state. To enable time traveling, we could use either ReplaySubject that can keep a reference of BehaviorSubject and a value the subject is being assigned, so it is essentially the same functionality as Redux and just a couple of lines of code. You can write your own HOCs too. I personally don't mock my shared state, I just set it the way I want. Not sure I understand the problem you're having with TypeScript, though. I really would encourage everyone looking at this to try this approach and to write a small app to really get to feel it. Here is a starter that you might have already looked at: https://codesandbox.io/s/how-react-should-be-50wp0
I agree, it can be very difficult to debug. But the beauty of rxjs is that it gives you choices. Instead of composing streams you can turn your observable into a promise and do the imperative programming that is easier to debug.
Great stuff, very useful pattern! But I think the title of the article is misleading, I think it should explicitly mention "Containment pattern" in the title.
By Signing In \ Signing Up, you agree to our privacy policy
We use cookies to offer you a better browsing experience, analyze site traffic, personalize content. Read how we use cookies. By using this site you consent to our use of cookies.
React Hooks + RxJS or How React Is Meant to Be
Great point! So, technically I would use either of these approaches to prevent unnecessary rerenders: 1. Split state in separate BehaviorSubjects or 2. Pipe your subject through filter like: useSharedState(subject.pipe(filter(s => s.type === 'test'))) // Let's say your state looks like { type: 'type', content: 'content' }
React Hooks + RxJS or How React Is Meant to Be
Link to Reddit discussion
React Hooks + RxJS or How React Is Meant to Be
First off, thanks a lot for your comment! I actually would like to challenge your point about the state modification. BehaviorSubject is more like an action/reducer combo, not the whole state. Remeber, that I argue in the article that we use combineLatest to get the whole state. To enable time traveling, we could use either ReplaySubject that can keep a reference of BehaviorSubject and a value the subject is being assigned, so it is essentially the same functionality as Redux and just a couple of lines of code. You can write your own HOCs too. I personally don't mock my shared state, I just set it the way I want. Not sure I understand the problem you're having with TypeScript, though. I really would encourage everyone looking at this to try this approach and to write a small app to really get to feel it. Here is a starter that you might have already looked at: https://codesandbox.io/s/how-react-should-be-50wp0
React Hooks + RxJS or How React Is Meant to Be
I agree, it can be very difficult to debug. But the beauty of rxjs is that it gives you choices. Instead of composing streams you can turn your observable into a promise and do the imperative programming that is easier to debug.
Building React Components Using Children Props and Context API
Great stuff, very useful pattern! But I think the title of the article is misleading, I think it should explicitly mention "Containment pattern" in the title.