ReactJS / Redux Tutorial - #8 Containers & Components (Smart & Dumb Components)

Not all Components need access to Redux State. You may therefore separate your App into "Smart" and "Dumb" Components - Containers and Presentation Components.

This video is Part of the ReactJS / Redux Basics Series.

[uragecz]

I saw a lot of tutorials on youtube, but no one was so good as your.. great job rly, love you series.. i look foward for react-native series

[iantxd]

Hello Max, you could make a small tutorial server-side rendering react, node, express, and redux please 🙏

[payakkeyur]

Great series Max. 5 stars! Wish to see a React Native series in future.

[eugenem]

Max, thanks a lot for this crystal clear course!

[TheKarstrasse]

Hello Max. Can you show a project of two way binding between Smart Component, say, a configuration screen with few dumb components like input boxes. The challenge would be to have default values and added values.

I have seen your video on two way binding but it was a class object not a smart-dumb architecture with react-redux connect. That gets a lot more challenging

[POWEROVERWWW]

Nice. But I have a question. What's a good thing to do that? Is it just because we can separate them as two groups for ease? That's it?

[alokranjan]

Thanks for your effort, just one question what IDE u r using or there any extension available in visual studio code which will change the path once updated in folder/file as it is doing in your video.

[jewbarrymore_]

Hey Max, thanks for the video, really helpful. I would have only one question, in the dumb components when you downgrade them to arrow functions why don't you leave the curly braces? You are not performing any actions inside (destructuring, variable declaration) the function that would require that. Just wrap the outermost div inside parentheses.

[omarbouzoumita]

Hey Max great explanation I'm really satisfied with this content thank you a lot, but what you said about dumb components is not 100% true in fact state can be handled from the function like component please if I'm wrong correct me:

import React, { Component} from 'react';
import { connect } from 'react-redux';

const App=(props)=>{
return(
<div>
<p>{props.count}</p>
<button
Add
</button>
</div>
);

}

const mapStateToProps=(state)=>{
return{
count:state.reducer1
}
}

const
return{
addVal:(val)=>{
dispatch({
type:'ADD',
payload:val
})
}
}
}

export default connect(mapStateToProps, mapsDispatchToProps)(App);

Regards.

[crucifixia]

hey max! awesome videos so far, it struck out to me my IDE does not auto update my import references when i move a file. I use Sublime Text 3, do you have any tips? I cant seem to find a good solution on google and not sure how to search it at this point, thanks!

[jbreslow]

How are you un-indenting the block of code at 2:44?

[gufranmirza]

yes please upload a small tutorial on server side rendering react.
Thanks

[burakkarasoy]

Great tutorials!. I have a question. Assume that there is 3 dumb components in app.js. First one is mytextInput and it has props props.changeUsername('Anna'), and second one is mytextInput and has props and third one is a list which has 1000 elements and called mylistcomponent. If i write something username textinpput changeUserName mwthod will be triggered and state will be changed. Wouldn't this situation trigger both of my 3 components re rendered again? Cause changeUserName function updates states which belong to App.js which is smart component and wraps all 3 dump components.

[benogidan]

Sorry but what plugin are you using that adjusts your file links

[sanjeevakaalex]

My Question: Suppose my dumb component has an input box where user can change Name, the way react works is I have to implement onChange() on input which in turn requires a state to work. So How should I Tackle this, is it ok for my dumb component to have its own state to change input field and when finally user hit ok button dispatch "CHANGE_USERNAME' action ?

[MultiJoniboy]

will you ever make a tutorial for MobX? :)

[mlaxwong]

What editor this video using? look nice

[周公来]

I see a lot of redux tutorial, this is the best, The best. But I think is not

[meysam]

what is the benifit of that i mean you increase. number of components and structure