React Redux Toolkit Tutorial for Beginners | Learn Modern Redux

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

摘要

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.

心得

  • 🔍 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.

时间轴

  • 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.

显示更多

思维导图

视频问答

  • 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.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
en
自动滚动:
  • 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
标签
  • Redux
  • Redux Toolkit
  • React
  • State Management
  • Global State
  • JavaScript
  • Web Development
  • Front-end Development
  • Counter Example
  • Tutorial