Coding

ReactJS / Redux Tutorial – #2 What is Redux? Why use it?

2 years ago
  • 00:00:00 the core problem with react chests state
  • 00:00:04 management is of course that we get app
  • 00:00:06 component we got sub components and if I
  • 00:00:09 want to change a text I can't do this
  • 00:00:11 directly instead I have to inform the
  • 00:00:14 parent change the text there and forgot
  • 00:00:17 additional components well then it gets
  • 00:00:19 even more complex therefore Redux has a
  • 00:00:23 different approach here we have our view
  • 00:00:26 or our application we might say and in
  • 00:00:29 this application in any given component
  • 00:00:32 we dispatch actions so one action might
  • 00:00:36 be changed name to stick with the
  • 00:00:37 previous example this action then is ran
  • 00:00:42 through a reducer that is where the
  • 00:00:44 Redux
  • 00:00:45 Redux reducer where the name comes from
  • 00:00:48 a reducer has one simple job or task it
  • 00:00:52 takes the action handles the action so
  • 00:00:56 if the action has changed name the
  • 00:00:58 reducer will have a method which knows
  • 00:01:01 what to do upon a change named action
  • 00:01:03 namely change the name and it will then
  • 00:01:05 take the old state and manipulate it in
  • 00:01:08 a way that it now reflects this action
  • 00:01:12 so takes the old state adds or execute
  • 00:01:16 this single action on the old state and
  • 00:01:18 gives us back a new state now this is
  • 00:01:22 best an immutable which means don't
  • 00:01:25 change the old state instead take it as
  • 00:01:27 a basis and then create a brand new
  • 00:01:30 state so kind of a copy of the old state
  • 00:01:33 with the change employees so the old
  • 00:01:35 state stays untouched we just create a
  • 00:01:37 new state and return this note you don't
  • 00:01:40 have to follow this immutable approach
  • 00:01:42 and I will come back to this in a future
  • 00:01:44 video but it's a good practice to do so
  • 00:01:47 because it gives you unique States in
  • 00:01:50 your application which makes it very
  • 00:01:52 clear at which point of time you had
  • 00:01:54 which state so we're in this reducer and
  • 00:01:57 we're getting back a new state now this
  • 00:02:00 state is then stored in well a store and
  • 00:02:03 we have only one store in the whole
  • 00:02:06 application in our read acts world
  • 00:02:08 this store has one simple task store our
  • 00:02:12 state that's why
  • 00:02:14 it's cold store and we may have multiple
  • 00:02:17 reducers but we only have one store so
  • 00:02:20 multiple reducers for multiple parts of
  • 00:02:23 our application but only one store which
  • 00:02:26 holds one unique store and then our
  • 00:02:29 application can subscribe to that store
  • 00:02:32 or specific components can subscribe to
  • 00:02:35 parts of the score store parts of the
  • 00:02:38 state they need and whenever the state
  • 00:02:41 is updated and therefore a new status
  • 00:02:43 passed to the store the store will
  • 00:02:46 automatically send it to all the
  • 00:02:48 components interested and the
  • 00:02:50 application will update so back to the
  • 00:02:53 previous example we had a rap component
  • 00:02:55 with all the other components here but
  • 00:02:57 now we also have to store and if we want
  • 00:03:00 to change something in user component
  • 00:03:03 from the main component well then we
  • 00:03:05 dispatch the action and reduce the state
  • 00:03:08 or change the state and then we pass the
  • 00:03:11 state to all the components interested
  • 00:03:13 that's all so that's the theory let's
  • 00:03:16 start seeing this in action

You may also like