Question - Todo App Demo

[gleisonkz]

Hi guys, first off, I want to say I love this library and the way it integrates with React.

I was reading and doing some tests using the Todo App provided by the docs, and I'm trying to make the application start with some todos loaded from an API call, but I don't think the way I did here is it right.

It doesn't fell right calling .subscribe mannualy from state file.

The getUsers function is inside api folder.

Can you guys take a look at this or suggest to me what would be the better way of doing this?

https://codesandbox.io/s/react-rxjs-basic-todos-9snq9w?file=/src/api/getTodos.ts

thanks

[josepot]

Hi @gleisonkz !

Thanks for your kind words. I moved the issue to the discussions section, I hope that you don't mind that.

The thing is that if I were to go back in time I would have probably written that Todos demo a bit differently. Anyways, I'm a bit busy right now with some work stuff, but I will get back to you in the next hours/days with a suggestion on this... However, if I forgot to do so, then please ping me with a reminder 🙏

[josepot]

Hi @gleisonkz !

So, yep, your intuition is right: manually calling subscribe, while also using tap for something like that should be a clear indicator that something is off. In the end the philosophy of this library is that we should be able to specify the dynamic behavior of any piece of state completely at the time of declaration. So, yep, what your code was doing is precisely what we would like to avoid doing: "poking" a setters whenever we want to change the state, because then it becomes very difficult to understand why and/or what changed a piece of state... The purpose of this library is to be able to compose different small pieces of state through streams.

Check this out, later today (or perhaps tomorrow) I will try to find the time to provide a better explanation of the changes that I've made in there.

[gleisonkz]

@josepot Man, that was fantastic, thanks so much for your time and to give me this example, I'm actually not so good of using all the power that rxjs gives us, but your example makes sence to me.

using this approach and using this library, do you think that would be cases when using the useEffect hook may be necessary?

I ask that cause my first thought was using useEffect to trigger the api call and trigger the combined streams.

[josepot]

I'm actually not so good of using all the power that rxjs gives us, but your example makes sence to me.

I mean, you are not the only one. Most developers are not used to think like that, it takes some time to learn these mental models, but IMO it pays off... Basically, learning both how to use Observables and how to compose state to derive new state can be a bit tricky at first.

using this approach and using this library, do you think that would be cases when using the useEffect hook may be necessary?

I've been using this library for quite some time now, and the only times that I've had to use useEffect (outside library code, ofc) is for creating some custom/low-level input React Components and things like that, never for managing domain state. But of course, those kinds of components should probably belong to a library... So, yeah, answering your question: for App development I have never needed to use useEffect while using react-rxjs.

I ask that cause my first thought was using useEffect to trigger the api call and trigger the combined streams.

Soon(ish) I'm going to get back to you on this one, b/c our idea is to actually handle the state from outside of react (even if we can and even prefer to collocate parts of the state management besides the relevant React Components, ofc) as we thing that's a much cleaner approach.

[gleisonkz]

I'm just wondering why all items in the list are being re-rendered when a item is deleted or created

[josepot]

Hi @gleisonkz and sorry that it took me a while to get back to you, I've been busy with work stuff.

Yeah, the only reason why rows are re-rendering is b/c the TodoItem component is not wrapped with React.memo... That's how React works, not much that we can do on that end. Here, checkout this example, you will notice that as soon as we use React.memo on theTodoItem component it stops re-rendering every time that there is a change on the keys of the list... TBH, the only times that we use memoization with React while using react-rxjs is for list item Components.

[gleisonkz]

Again @josepot, thanks so much for your answer, actually I'm really new using React, I usually work with Angular and I'm giving React a try.