CODEWITHSUNDEEP
reactjsredux
partyelite
partyelite

Reputation: 892

Which components to connect with react redux

I'm new to react and I'm trying to learn about redux.

I have a simple demo app where user should login. After login he can see a list of movies, can click on a single movie to see the details, comments, actors etc.. and can add a movie to basket. It's a simple app with a few components.

Which components should I connect to Redux? I have seen people connect every single compoment (in my example that would mean that I should write actions,reduces etc.. for component that fetches a list of movies comments and actors) but that feels wrong to me.. As I see it I have user data and movies added to the basket as global data and only components that need that data should be connected to Redux?

Am I wrong? Should I connect everything with redux?

Thank you

Upvotes: 1

Views: 47

Answers (2)

Boris Burkov
Boris Burkov

Reputation: 14456

I suppose, you read Dan Abramov's super-famous post about dumb/presentational and stateful/container components. Basically, dumb ones don't need to be connected to redux at all.

As for the stateful ones... it depends. If some data belongs to the state of component itself and doesn't need to be shared with any other components, don't connect it with Redux. Otherwise, if some piece of state is shared between multiple components - use Redux store for those data.

For instance, if you're writing a blog and you share the photo of your user between multiple components - let your Redux store contain it. But if you load and display your user CV only in one component, keep it in that component's state and load it with fetch() call in componentDidMount().

Keep in mind, though, that later on, when your project grows, you might want to share this piece of data with other components, too, so it might take some refactoring and your state sometimes gradually travels from component's state to Redux store like most of the genes gradually drifted from your mitochondrial genome to your nucleus.

Upvotes: 2

Егор Ересько
Егор Ересько

Reputation: 47

Connect only those components that need data from the storage.

The component will produce the rerender with change of props. Components that do not need data from the storage do not need to be updated.

Upvotes: 1

Related Questions