Coding

ReactJS / Redux Tutorial – #1 Introduction

  • 00:00:01 hi everyone welcome to a brand new
  • 00:00:03 series on this channel or should I say
  • 00:00:04 the continuation the logical next step
  • 00:00:07 after the reaction Spacek series this
  • 00:00:11 series is all about react chess and
  • 00:00:14 redux and we already got an idea
  • 00:00:18 in the react.js basics series if you
  • 00:00:22 solve that why we might need an
  • 00:00:24 improvement for bigger apps or for apps
  • 00:00:27 where we really need to manage our state
  • 00:00:30 our data in the application well you got
  • 00:00:32 a lot of component interaction and why
  • 00:00:35 this might lead to problems
  • 00:00:37 now Redux is kind of a solution to this
  • 00:00:41 problem and makes handling the
  • 00:00:43 application state so knowing where we
  • 00:00:45 are and handling our data really really
  • 00:00:50 easy so before I dive into
  • 00:00:54 react.js read acts here let's have a
  • 00:00:57 look at a basic react chess
  • 00:01:00 application now Redux at this point now
  • 00:01:03 that's a very very simple application
  • 00:01:05 which leads to this screen where I got
  • 00:01:07 my main page where I have a button and
  • 00:01:09 then the user page where we see a user
  • 00:01:11 name now if I click the change to
  • 00:01:14 username button the name down here
  • 00:01:15 changed do you see it let me show you
  • 00:01:18 again it changes to Ana and of course
  • 00:01:21 the code responsible responsible for
  • 00:01:23 this lives in my index.js file which has
  • 00:01:27 my state where its story initial user
  • 00:01:29 name max and then this change username
  • 00:01:33 method where I change the user name to a
  • 00:01:35 new user name now this change user name
  • 00:01:39 method here is passed as a prop to my
  • 00:01:43 main component here and the user name
  • 00:01:46 from my state here is passed as a prop
  • 00:01:49 to my user component now this user
  • 00:01:52 component simply outputs to user name
  • 00:01:54 and the main component here well this
  • 00:01:58 component actually has this onclick
  • 00:02:00 listener on my button where I trigger
  • 00:02:03 the change user name method and change
  • 00:02:05 to user name – well Ana
  • 00:02:07 so that is what's going on in this
  • 00:02:10 application here that is of course a
  • 00:02:12 relatively simple
  • 00:02:14 and easy application you wouldn't see
  • 00:02:16 the big problem though you can already
  • 00:02:19 see what might lead to a problem I'm
  • 00:02:23 handling all this stated in next is and
  • 00:02:25 here it's doable and not that confusing
  • 00:02:29 because I only have two components
  • 00:02:31 because I only have well one thing that
  • 00:02:34 changes a state or changes the state
  • 00:02:35 days single method here but imagine this
  • 00:02:38 being a bigger app and you saw this in
  • 00:02:41 the react.js basics series very where he
  • 00:02:44 talked about component interaction where
  • 00:02:46 we had multiple buttons and so on and it
  • 00:02:49 quickly gets out of hand you quickly
  • 00:02:52 have to create all these chains of
  • 00:02:56 passing event handlers as props to
  • 00:02:59 children these children calling the
  • 00:03:02 events passing data back to the root
  • 00:03:05 component passing it to other children
  • 00:03:07 so it really gets complicated and you
  • 00:03:11 really get a problem managing that state
  • 00:03:14 and knowing where you are in the
  • 00:03:16 application therefore we need a better
  • 00:03:19 solution and I will use this basic app
  • 00:03:22 which you can find as a separate branch
  • 00:03:24 and you get a repository you find in the
  • 00:03:26 video description as the basis for this
  • 00:03:30 redux serious and will gradually enhance
  • 00:03:33 this application to then really be well
  • 00:03:36 batter and to show how to use redux
  • 00:03:39 so let's start