React Redux Toolkit Tutorial for Beginners | Learn Modern Redux

00:20:49
https://www.youtube.com/watch?v=u3KlatzB7GM

Sintesi

TLDRVideoen lærer seerne hvordan man implementerer Redux Toolkit for global tilstandsadministrasjon i React-applikasjoner. Den inneholder en introduksjon til Redux Toolkit, trinnvis veiledning til oppretting av et prosjekt, installering av avhengigheter og oppretting av en Redux-butikk. Det demonstreres også hvordan man lager handlinger for å manipulere en tellerverdi, med ekstra funksjoner for tilbakestilling og inkrementering med et spesifisert beløp, mens man bygger en enkel applikasjon for å vise funksjonaliteten i Redux Toolkit.

Punti di forza

  • 🔍 Redux Toolkit er anbefalt for enklere tilstandsadministrasjon.
  • 📦 Installer Redux Toolkit med npm.
  • ⚙️ Opprett en Redux-butikk (store) for applikasjonen.
  • 🧩 Bruk slices til å organisere tilstanden.
  • ➕ Kall handlinger (actions) for å manipulere global tilstand.
  • 🌐 Importer Provider for å gjøre tilstanden tilgjengelig.
  • 📊 Bruk useSelector og useDispatch for å håndtere tilstanden.
  • 💡 Legg til flere handlinger for å utvide funksjonaliteten.
  • 🔄 Implementer reset-funksjonalitet for tilstanden.
  • 📈 Demonstrer hvordan man oppdaterer tilstandsverdier effektivt.

Linea temporale

  • 00:00:00 - 00:05:00

    Introduksjon av Redux toolkit som den moderne metoden for å håndtere global tilstand i React-applikasjoner. Fokus på å implementere Redux toolkit er anbefalt av skaperne av Redux.

  • 00:05:00 - 00:10:00

    Opprettelse av en enkel prosjektstruktur i Visual Studio Code med nødvendige avhengigheter og konfigurasjon for Redux toolkit. Introduksjon av store-konfigurasjon og Provider for å gjøre den globale tilstanden tilgjengelig i applikasjonen.

  • 00:10:00 - 00:15:00

    Opprettelse av en funksjonsmappe for en teller (counter) med en 'slice' for å håndtere tilstand og handlinger knyttet til telleren. Definering av initial tilstand, reduserer og aksjoner som 'increment' og 'decrement'.

  • 00:15:00 - 00:20:49

    Implementering av tellerkomponenten som bruker Redux hooks (useSelector og useDispatch) for å navigere og manipulere global tilstand. Utvidelse av funksjonaliteten med nye handlinger som 'reset' og 'increment by amount' for mer interaktivitet.

Mostra di più

Mappa mentale

Video Domande e Risposte

  • Hva er forskjellen mellom Redux og Redux Toolkit?

    Redux Toolkit er en moderne måte å implementere Redux på, designet for å gjøre kode enklere og mer effektiv.

  • Er denne opplæringen for nybegynnere?

    Nei, denne opplæringen forutsetter en viss kunnskap om React, men er rettet mot nybegynnere i Redux Toolkit.

  • Hva er en 'slice' i Redux Toolkit?

    En slice representerer en del av tilstanden i Redux, og inneholder logikken for endringene av denne tilstanden.

  • Hvordan kan jeg installere Redux Toolkit?

    Du kan installere Redux Toolkit ved å bruke npm med kommandoen `npm install @reduxjs/toolkit react-redux`.

  • Hvilke handlinger (actions) ble demonstrert i videoen?

    Handlingene som ble demonstrert inkluderer inkrementere, dekrementere, tilbakestille og inkrementere med beløp.

Visualizza altre sintesi video

Ottenete l'accesso immediato ai riassunti gratuiti dei video di YouTube grazie all'intelligenza artificiale!
Sottotitoli
en
Scorrimento automatico:
  • 00:00:00
    redux is the original old school global
  • 00:00:02
    state manager for react but now the
  • 00:00:04
    creators of redux offer redux toolkit
  • 00:00:07
    and on the redux website it says redux
  • 00:00:10
    toolkit is intended to be the standard
  • 00:00:13
    way to write redux logic and we strongly
  • 00:00:16
    recommend that you use it so moving
  • 00:00:18
    forward redux toolkit is the modern
  • 00:00:21
    application of redux that you should
  • 00:00:23
    learn how to implement
  • 00:00:25
    [Music]
  • 00:00:29
    hello and welcome i'm dave today we're
  • 00:00:32
    going to learn about implementing redux
  • 00:00:34
    toolkit for global state management with
  • 00:00:36
    react
  • 00:00:37
    i'll provide links to example source
  • 00:00:39
    code and all resources in the
  • 00:00:41
    description below before we get started
  • 00:00:44
    today please understand that this
  • 00:00:45
    tutorial is not for absolute beginners
  • 00:00:48
    in react it is for redux toolkit
  • 00:00:50
    beginners but you should already have an
  • 00:00:52
    understanding of react and at a minimum
  • 00:00:55
    you should have already completed a
  • 00:00:56
    react for beginners course like the one
  • 00:00:58
    found on my channel or another one like
  • 00:01:00
    it it would also be beneficial if you
  • 00:01:03
    are already familiar with the built-in
  • 00:01:05
    react hook use reducer because it has a
  • 00:01:07
    lot of the same concepts and terminology
  • 00:01:09
    that you find in redux overall redux is
  • 00:01:12
    a global state manager that allows you
  • 00:01:14
    to manage your app state in a single
  • 00:01:16
    place which can be very useful
  • 00:01:19
    the creators of redux now recommend
  • 00:01:21
    implementing redux through the use of
  • 00:01:23
    redux toolkit
  • 00:01:24
    redux toolkit addresses several common
  • 00:01:27
    complaints about redux including complex
  • 00:01:29
    store configuration too many added
  • 00:01:32
    packages and too much code to implement
  • 00:01:34
    overall
  • 00:01:35
    long story short redux toolkit is an
  • 00:01:38
    easier modern way to implement the power
  • 00:01:40
    of redux as a global state manager today
  • 00:01:42
    we're going to create a simple example
  • 00:01:44
    project to learn how to set up redux
  • 00:01:46
    toolkit and get some initial exposure to
  • 00:01:49
    how it all works so you can see here in
  • 00:01:51
    visual studio code i have a basic
  • 00:01:54
    project set up with very few
  • 00:01:56
    dependencies so i've removed the things
  • 00:01:58
    already that we will not be using i used
  • 00:02:00
    create react app of course to create the
  • 00:02:02
    project
  • 00:02:04
    and then in the index js i've removed
  • 00:02:06
    some of the boilerplate code that we
  • 00:02:07
    don't usually use the same with the
  • 00:02:09
    app.js
  • 00:02:10
    and in the index.css i've put in some of
  • 00:02:13
    my own css but of course you could get
  • 00:02:16
    this from the source code in the
  • 00:02:17
    description or you can just create your
  • 00:02:20
    own what we're going to focus on today
  • 00:02:22
    though is the logic of redux toolkit so
  • 00:02:24
    back at the package json i'm going to
  • 00:02:27
    open up a terminal window and we're
  • 00:02:29
    going to go ahead and install redux
  • 00:02:31
    toolkit okay we're going to use npm
  • 00:02:34
    install and then we'll put the at symbol
  • 00:02:37
    and redux js slash
  • 00:02:40
    toolkit
  • 00:02:41
    and then put react dash redux and press
  • 00:02:44
    enter and this will install and as soon
  • 00:02:47
    as it completes will be up and running
  • 00:02:50
    and it's already ready to go okay i'm
  • 00:02:52
    going to close out of the terminal
  • 00:02:53
    window and in the source folder or the
  • 00:02:56
    source directory of our file tree let's
  • 00:02:58
    create another directory and name this
  • 00:03:01
    app in all lower case now inside the app
  • 00:03:05
    directory we're going to create a store
  • 00:03:07
    and we'll just name it
  • 00:03:08
    store.js okay redux store and redux are
  • 00:03:13
    kind of used interchangeably both stand
  • 00:03:15
    for a container for javascript apps and
  • 00:03:18
    it stores the whole state of the app in
  • 00:03:20
    an immutable object tree and really the
  • 00:03:23
    intended pattern for redux is just to
  • 00:03:25
    have a single store for your application
  • 00:03:27
    multiple stores are possible but that is
  • 00:03:30
    not what is recommended by the creators
  • 00:03:32
    of redux to start our store we're going
  • 00:03:35
    to import and then we want to import
  • 00:03:38
    configure store from redux js slash
  • 00:03:42
    toolkit and after we have that let's go
  • 00:03:45
    ahead and just say export
  • 00:03:47
    const
  • 00:03:48
    set the store equal to
  • 00:03:50
    that configure store
  • 00:03:52
    and now inside the configure store we
  • 00:03:54
    have an object and it holds a reducer
  • 00:03:57
    now this reducer is going to be empty
  • 00:04:00
    for now but we're going to come back and
  • 00:04:03
    put in reducers that we create so we'll
  • 00:04:06
    just save this file after creating our
  • 00:04:08
    store we need to go back to the index js
  • 00:04:11
    and import that so let's import
  • 00:04:14
    now we'll have store
  • 00:04:16
    and let's go ahead and say that is from
  • 00:04:20
    our dot slash app and then slash store
  • 00:04:25
    and besides that import we also need to
  • 00:04:27
    import
  • 00:04:28
    a provider which will provide this
  • 00:04:31
    global state to our app so that comes
  • 00:04:33
    from
  • 00:04:34
    react dash redux
  • 00:04:37
    and now that we have the provider if
  • 00:04:38
    you're familiar with the context api and
  • 00:04:41
    the use context hook this looks very
  • 00:04:43
    familiar because we're just going to
  • 00:04:45
    wrap the app in the provider
  • 00:04:48
    and now we say store
  • 00:04:49
    equal to store so we're passing that in
  • 00:04:52
    and then we're going to have a closing
  • 00:04:54
    tag for the provider of course and that
  • 00:04:56
    needs to come after our app so we're
  • 00:04:59
    wrapping the app with the provider and
  • 00:05:01
    now our store our global state will be
  • 00:05:04
    available to the app with that complete
  • 00:05:06
    we need to create a features directory
  • 00:05:09
    inside of our source directory so i'll
  • 00:05:11
    click for a new directory and now i want
  • 00:05:13
    to type
  • 00:05:14
    features
  • 00:05:15
    and now inside of this directory we're
  • 00:05:18
    going to create another directory for
  • 00:05:20
    our counter because we're creating a
  • 00:05:22
    counter example today so that is one of
  • 00:05:24
    the features and now this counter will
  • 00:05:27
    have a slice and the name slice comes
  • 00:05:30
    from splitting up redux state objects
  • 00:05:32
    into multiple slices of state so a slice
  • 00:05:36
    is really a collection of reducer logic
  • 00:05:38
    and actions for a single feature in the
  • 00:05:41
    app for example a blog might have a
  • 00:05:43
    slice for posts and another slice for
  • 00:05:46
    comments you would handle the logic of
  • 00:05:48
    each differently so they each get their
  • 00:05:50
    own slice so now for the counter we're
  • 00:05:53
    going to create a slice so we're in the
  • 00:05:55
    counter folder and i'll create a new
  • 00:05:57
    file here and i'll name this counter
  • 00:06:00
    slice with camelcase so a capital s dot
  • 00:06:03
    js we'll start the counter slice with an
  • 00:06:05
    import and here we need to import
  • 00:06:08
    create slice and it comes from redux js
  • 00:06:12
    toolkit and now we're going to create an
  • 00:06:14
    initial state
  • 00:06:16
    so that's exactly what we'll name this
  • 00:06:18
    const
  • 00:06:19
    and here we'll set this equal to
  • 00:06:21
    count
  • 00:06:22
    and we'll just start it with a value of
  • 00:06:25
    zero
  • 00:06:26
    now after that we need to go ahead and
  • 00:06:28
    start to create our counter slice so
  • 00:06:31
    i'll just type export const now counter
  • 00:06:35
    slice
  • 00:06:36
    we'll set this equal to our create slice
  • 00:06:38
    that we've imported and now an object
  • 00:06:41
    inside of it it starts with a name so
  • 00:06:44
    let's just name this counter
  • 00:06:47
    after that the second argument that will
  • 00:06:49
    be passed in or the parameter as we
  • 00:06:51
    define this is the initial
  • 00:06:54
    state
  • 00:06:55
    and then after that we have reducers and
  • 00:06:58
    now this is where we would name all of
  • 00:07:00
    our different actions this starts to
  • 00:07:02
    look similar to the use reducer hook
  • 00:07:05
    that is built in to react already so if
  • 00:07:08
    you're familiar with that that will help
  • 00:07:09
    but we're going to create a couple of
  • 00:07:11
    actions for our counter one is increment
  • 00:07:15
    and now we'll have an anonymous function
  • 00:07:16
    here that receives the state
  • 00:07:19
    and inside this we'll take the
  • 00:07:21
    state.count that we defined above in our
  • 00:07:23
    initial state and we'll just add one to
  • 00:07:26
    the total
  • 00:07:27
    and now i'm going to highlight this
  • 00:07:30
    press shift alt down arrow to copy it
  • 00:07:32
    down but remember we need a comma
  • 00:07:34
    because this is an object so we have our
  • 00:07:36
    increment and now let's change this
  • 00:07:38
    increment to
  • 00:07:40
    decrement which means we need to change
  • 00:07:42
    the plus symbol to a minus and so this
  • 00:07:44
    subtracts one from the total two so
  • 00:07:46
    we've created two actions
  • 00:07:48
    inside of our reducer
  • 00:07:50
    now we need to export both our actions
  • 00:07:53
    and our reducer so here i'll say export
  • 00:07:56
    const and we'll destructure those
  • 00:07:58
    actions so we have increment
  • 00:08:02
    and decrement
  • 00:08:04
    and then those are destructured from our
  • 00:08:06
    counter slice
  • 00:08:09
    dot actions and it looks like i need to
  • 00:08:11
    press
  • 00:08:12
    alt z to wrap the code i'm going to
  • 00:08:14
    scroll this up so you can see it a
  • 00:08:15
    little better as well actually i can
  • 00:08:17
    just press ctrl b right now and you can
  • 00:08:19
    see it all in one line that hides the
  • 00:08:20
    file tree okay and at the bottom we need
  • 00:08:24
    to say export default and here we'll
  • 00:08:27
    take our counter slice again that we've
  • 00:08:29
    created and this is the full reducer
  • 00:08:31
    that we export here so let's save now
  • 00:08:34
    both of these must be exported if we
  • 00:08:36
    want to use these actions we need to
  • 00:08:38
    export them and we can see they're
  • 00:08:40
    available from the counter slice dot
  • 00:08:42
    actions we also need to export the full
  • 00:08:45
    reducer because the store will need that
  • 00:08:48
    okay let's show the file tree again and
  • 00:08:50
    now let's go back to the store because
  • 00:08:52
    we need to import our reducer so at the
  • 00:08:55
    top
  • 00:08:56
    we'll say import and this will be
  • 00:08:58
    counter reducer
  • 00:09:00
    and that will be from now we'll have two
  • 00:09:03
    dots
  • 00:09:05
    features
  • 00:09:06
    and then counter and finally
  • 00:09:09
    counter slice and i'll press alt z to
  • 00:09:12
    wrap this code so we can see it all at
  • 00:09:13
    once now that we have the counter
  • 00:09:15
    reducer we need to put it here in the
  • 00:09:17
    reducer object where we save some space
  • 00:09:20
    for it so we'll say counter and then
  • 00:09:22
    counter
  • 00:09:24
    reducer and save now we could easily
  • 00:09:27
    have other slices that we're importing
  • 00:09:30
    as well to the same store so we need to
  • 00:09:32
    remember that and you might want to save
  • 00:09:34
    a comma after each one and it doesn't
  • 00:09:36
    hurt to have the comma even if you only
  • 00:09:38
    have one in here now that we've added
  • 00:09:40
    the counter reducer to the store it is
  • 00:09:42
    available to the entire app through the
  • 00:09:45
    provider that we put here in the index
  • 00:09:47
    js and you can see the provider provides
  • 00:09:50
    the store so with that available let's
  • 00:09:53
    now create our counter component inside
  • 00:09:55
    of the counter directory and we will
  • 00:09:58
    have that logic available to us so let's
  • 00:10:01
    go ahead and create counter with a
  • 00:10:03
    capital c dot js now i have react es7
  • 00:10:07
    snippets installed so i can type rafce
  • 00:10:11
    and press enter and i get a functional
  • 00:10:14
    expression component created quickly so
  • 00:10:16
    if you don't have that you might want to
  • 00:10:18
    look into that extension or just type
  • 00:10:20
    out this basic stuff right here for our
  • 00:10:23
    functional component
  • 00:10:24
    now at the top of the file i want to
  • 00:10:27
    import and i'm going to import a couple
  • 00:10:29
    of hooks from redux one is called use
  • 00:10:32
    selector
  • 00:10:33
    and the other one is use
  • 00:10:35
    dispatch
  • 00:10:36
    and now that i have those imported let's
  • 00:10:39
    go ahead and import our actions that we
  • 00:10:41
    created so we have an increment
  • 00:10:44
    and a decrement that we both created
  • 00:10:47
    inside of that reducer the counter slice
  • 00:10:50
    actually the counter reducer that's in
  • 00:10:51
    the counter slice
  • 00:10:53
    so this will come from
  • 00:10:55
    the counter slice which we're already in
  • 00:10:57
    the folder where it is so it's easy to
  • 00:10:59
    navigate to with the imports complete
  • 00:11:02
    let's go ahead and add our state to the
  • 00:11:04
    component so here we'll have our count
  • 00:11:07
    and we'll set that equal to
  • 00:11:10
    use selector
  • 00:11:11
    now inside the selector we'll reference
  • 00:11:13
    the state
  • 00:11:15
    now i'll have an arrow and i'll say
  • 00:11:16
    state
  • 00:11:17
    dot counter
  • 00:11:19
    dot count once again i can see i'm
  • 00:11:22
    exceeding the width so i'm going to
  • 00:11:24
    press
  • 00:11:25
    ctrl b to hide that file tree for now so
  • 00:11:28
    we'll just stay in the component and you
  • 00:11:29
    can see all of the code okay after count
  • 00:11:32
    is defined i also want to define the
  • 00:11:34
    dispatch
  • 00:11:36
    and now with the dispatch we'll just set
  • 00:11:37
    that equal to use
  • 00:11:40
    dispatch we're now ready to add some jsx
  • 00:11:44
    to the code here so i'm going to
  • 00:11:45
    eliminate this div that we have
  • 00:11:48
    and inside the jsx i'm going to create a
  • 00:11:51
    section element
  • 00:11:52
    and then inside of the section element a
  • 00:11:55
    paragraph and the paragraph is just
  • 00:11:56
    going to display our count state
  • 00:11:59
    and after the paragraph i'm going to add
  • 00:12:02
    a div
  • 00:12:03
    and inside the div i'm going to have a
  • 00:12:06
    button
  • 00:12:07
    and this button is just going to have a
  • 00:12:08
    plus symbol and then i could copy that
  • 00:12:11
    down
  • 00:12:12
    and then create one with a minus symbol
  • 00:12:15
    now both of these need an on click as
  • 00:12:18
    well so we'll set the on click equal to
  • 00:12:21
    now we'll have an anonymous function and
  • 00:12:23
    inside the anonymous function we can
  • 00:12:25
    call
  • 00:12:26
    the dispatch and inside the dispatch we
  • 00:12:29
    can pass any of those actions we created
  • 00:12:31
    so here we'll have the
  • 00:12:33
    increment
  • 00:12:34
    and now we call that inside the dispatch
  • 00:12:36
    as well and actually i'll copy this down
  • 00:12:38
    once again i should have waited to copy
  • 00:12:40
    down before
  • 00:12:42
    get rid of that extra button and now
  • 00:12:44
    we'll just change this
  • 00:12:46
    to our decrement
  • 00:12:48
    and we'll change that plus symbol to a
  • 00:12:50
    minus
  • 00:12:51
    and that's our basic jsx here for the
  • 00:12:54
    counter
  • 00:12:55
    now we need to go back to the file tree
  • 00:12:57
    into our app.js and we'll import the
  • 00:12:59
    counter at the top
  • 00:13:01
    so we'll say import
  • 00:13:04
    counter
  • 00:13:05
    and that's not what i wanted i just
  • 00:13:07
    needed to import the counter component
  • 00:13:10
    so import
  • 00:13:12
    counter from and here it will be from
  • 00:13:16
    features
  • 00:13:18
    and then counter and finally there's our
  • 00:13:21
    counter file
  • 00:13:23
    okay inside the jsx
  • 00:13:26
    we'll just put in
  • 00:13:27
    the counter component and save now we're
  • 00:13:30
    ready to open up a terminal window with
  • 00:13:32
    control backtick type npm start
  • 00:13:35
    and we'll see what happens with our app
  • 00:13:37
    i'm going to drag over the visual studio
  • 00:13:39
    code window so we can see both actually
  • 00:13:42
    here we go so we've got the code on the
  • 00:13:45
    left and the app on the right hide the
  • 00:13:48
    file tree so we see more of the code
  • 00:13:50
    okay plus
  • 00:13:51
    that's working just fine
  • 00:13:53
    decrement here so increment
  • 00:13:56
    decrement everything's good with the
  • 00:13:58
    basic app function here and of course
  • 00:14:00
    this is a very simple example so it just
  • 00:14:03
    shows you kind of how redux toolkit is
  • 00:14:05
    set up and the structure overall for an
  • 00:14:07
    application let's go ahead and add a
  • 00:14:09
    couple of more actions so you can
  • 00:14:11
    experiment a little bit with the pattern
  • 00:14:13
    and see how more actions would be added
  • 00:14:15
    i'm going to drag the code back over to
  • 00:14:17
    full screen
  • 00:14:19
    and now that we have that i'll close the
  • 00:14:20
    terminal to add the new actions we need
  • 00:14:23
    to go to our counter slice file and
  • 00:14:25
    we'll just add more actions right here
  • 00:14:27
    in this reducers object so the first one
  • 00:14:29
    i want to add is a reset which is simply
  • 00:14:32
    going to reset everything for us so
  • 00:14:34
    we'll have our state
  • 00:14:36
    and we'll set this to an anonymous
  • 00:14:38
    function and here the state.count
  • 00:14:41
    will just be set to zero so it resets
  • 00:14:43
    the value for us
  • 00:14:45
    now the next one i want to add will be
  • 00:14:47
    just a little more complex but not too
  • 00:14:49
    bad we'll call this increment
  • 00:14:51
    by
  • 00:14:52
    amount
  • 00:14:53
    now it's going to receive not only the
  • 00:14:55
    state
  • 00:14:56
    but an action
  • 00:14:58
    and now inside we'll go ahead and say
  • 00:15:01
    state dot count
  • 00:15:03
    and this is going to be actually plus
  • 00:15:05
    equal
  • 00:15:06
    and now we'll set the action dot payload
  • 00:15:09
    once again this kind of goes back to
  • 00:15:11
    referencing the use reducer hook because
  • 00:15:13
    it also has payloads so here this will
  • 00:15:16
    be an amount that we pass in and it will
  • 00:15:19
    be in the payload of this function now
  • 00:15:21
    after we add new actions we have to
  • 00:15:24
    remember to go ahead and export those as
  • 00:15:26
    well so here we'll export reset along
  • 00:15:29
    with it and then increment by amount and
  • 00:15:32
    save now we've already exported our
  • 00:15:34
    reducer to the store so we don't need to
  • 00:15:36
    do that again we've just added these new
  • 00:15:38
    actions so let's just go back to the
  • 00:15:40
    component and we can put these actions
  • 00:15:42
    to work for us so we have increment
  • 00:15:45
    and decrement and i'm going to put these
  • 00:15:47
    on separate lines now so increment
  • 00:15:49
    decrement
  • 00:15:51
    and after that we're going to have
  • 00:15:54
    reset
  • 00:15:55
    and after that we'll have
  • 00:15:58
    increment if i could spell increment
  • 00:16:00
    there we go increment by amount
  • 00:16:02
    and then we'll put that on another line
  • 00:16:04
    and save that much to get the formatting
  • 00:16:06
    so now we have our actions imported and
  • 00:16:09
    i'm going to need to do one other import
  • 00:16:11
    here
  • 00:16:12
    and this will be import
  • 00:16:15
    use state
  • 00:16:17
    and there it is from react because we're
  • 00:16:19
    going to use that for the amount that we
  • 00:16:21
    choose to increment by
  • 00:16:23
    so now besides these hooks that we have
  • 00:16:26
    here let's go ahead and set up our state
  • 00:16:29
    for that increment amount
  • 00:16:31
    and let's just call it that increment
  • 00:16:33
    amount and set
  • 00:16:36
    increment
  • 00:16:37
    amount
  • 00:16:39
    now i'll set that equal to use state and
  • 00:16:42
    we'll just start out with a value of
  • 00:16:44
    zero i'm going to define one more
  • 00:16:46
    variable here and it's just because
  • 00:16:48
    we're going to use a text input so
  • 00:16:51
    we need to verify that we get a number
  • 00:16:54
    value so we'll say increment amount
  • 00:16:56
    which is the state
  • 00:16:58
    and if it is not a number we're checking
  • 00:17:01
    it right there we'll just use the short
  • 00:17:03
    circuit to set it equal to zero so we
  • 00:17:06
    don't get a not a number value returned
  • 00:17:09
    and this will ensure we have a number
  • 00:17:11
    either added or it will at least be zero
  • 00:17:13
    if a number is not in the input
  • 00:17:16
    and now a quick function definition and
  • 00:17:18
    i'll call this reset all
  • 00:17:20
    because i would not only want to reset
  • 00:17:22
    the state i want to
  • 00:17:24
    reset our use state value of the
  • 00:17:26
    incremented amount as well so we'll say
  • 00:17:28
    set
  • 00:17:30
    increment amount and we'll set that to
  • 00:17:32
    zero and then we'll also use our
  • 00:17:34
    dispatch that will set our global state
  • 00:17:37
    using the reset action
  • 00:17:39
    and that will be set back to zero as
  • 00:17:41
    well with that action that we defined
  • 00:17:43
    now let's put these to work inside the
  • 00:17:45
    jsx so inside of this section that we've
  • 00:17:48
    already created
  • 00:17:49
    let's go ahead and add an input element
  • 00:17:53
    and besides the input it says type text
  • 00:17:56
    i guess that would be okay
  • 00:17:58
    let's put this on another line and tab
  • 00:18:01
    in there we go
  • 00:18:03
    so besides the text attribute let's go
  • 00:18:05
    ahead and add a value attribute to make
  • 00:18:08
    this a controlled input and it will have
  • 00:18:10
    the increment
  • 00:18:11
    amount that we defined in use state
  • 00:18:14
    and then it's going to have an on change
  • 00:18:17
    and we set that equal to an anonymous
  • 00:18:19
    function that gets
  • 00:18:21
    the event and then inside of this we'll
  • 00:18:24
    say set
  • 00:18:25
    increment amount and we pass in the e
  • 00:18:28
    dot target dot value so just a
  • 00:18:30
    traditional controlled input for us
  • 00:18:33
    after the input i'm going to scroll up
  • 00:18:35
    for some more room i want to add another
  • 00:18:38
    div
  • 00:18:39
    and then inside the div i'm going to
  • 00:18:40
    have two buttons again so i'll have a
  • 00:18:43
    button
  • 00:18:44
    and let's say on this button
  • 00:18:46
    add amount and let's go ahead and add
  • 00:18:49
    the on click here for the button as well
  • 00:18:51
    so
  • 00:18:52
    on click
  • 00:18:53
    equals an anonymous function
  • 00:18:56
    and our pattern before stays the same so
  • 00:18:58
    then we call dispatch
  • 00:19:00
    and now we'll say
  • 00:19:02
    increment by amount which is a little
  • 00:19:05
    bit longer name for our action but
  • 00:19:06
    that's what it is and then we'll just
  • 00:19:08
    pass in that add value variable that i
  • 00:19:10
    defined above i'm going to press
  • 00:19:12
    alt z to wrap the code so you can see it
  • 00:19:14
    all so we defined add value to make sure
  • 00:19:17
    that it was a number so it's either 0 or
  • 00:19:21
    the number that is input and that was
  • 00:19:22
    defined above but here we're calling our
  • 00:19:25
    action with dispatch once again now i'm
  • 00:19:28
    going to copy this down and the on click
  • 00:19:30
    here for the second button will be much
  • 00:19:32
    simpler we'll just pass in
  • 00:19:34
    the reset all function that we defined
  • 00:19:36
    above and here instead of add amount
  • 00:19:40
    we'll just put
  • 00:19:42
    reset just one t and save okay i'm going
  • 00:19:45
    to drag visual studio code over to the
  • 00:19:47
    left and we can see our component it now
  • 00:19:49
    has the new input and the new buttons as
  • 00:19:51
    well so any amount that we add here say
  • 00:19:54
    10 and we click add amount
  • 00:19:56
    our state is going up by tens and if we
  • 00:19:59
    reset yes it sets both to zero see if we
  • 00:20:02
    can put in a negative number
  • 00:20:04
    negative two and we add yep that works
  • 00:20:07
    too so anything we put in here and of
  • 00:20:10
    course an abc shouldn't work it should
  • 00:20:12
    identify so yeah it's just zero there so
  • 00:20:14
    that doesn't change anything so if we go
  • 00:20:16
    by twos we can go back up
  • 00:20:19
    all good so our app is working and
  • 00:20:21
    overall this shows you how to implement
  • 00:20:23
    a simple state and some basic actions
  • 00:20:26
    and get the whole redux toolkit
  • 00:20:28
    structure up and running remember to
  • 00:20:30
    keep striving for progress over
  • 00:20:32
    perfection and a little progress every
  • 00:20:34
    day will go a very long way please give
  • 00:20:37
    this video a like if it's helped you and
  • 00:20:39
    thank you for watching and subscribing
  • 00:20:41
    you're helping my channel grow have a
  • 00:20:43
    great day and let's write more code
  • 00:20:45
    together very soon
Tag
  • Redux
  • Redux Toolkit
  • React
  • State Management
  • Global State
  • JavaScript
  • Web Development
  • Front-end Development
  • Counter Example
  • Tutorial