How to use Redux and Redux Thunk with React Tutorial

How to use Redux and Redux Thunk with React Tutorial

In this video I setup a react app using create-react-app from scratch, then I explain how to write a simple stateful component to keep track of a count. After that, we bring in redux to instead used a centralized store to keep track of the count and increment it. Finally, we bring in redux-thunk so that we can invoke async actions to simulate a real world scenario like talking to a restful API.

------------

For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Book mark these links!

I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

[WebDevCody]

Heads up, there is something called Redux Toolkit which I'd recommend using in 2022. This tutorial is a bit dated.

[bqxcyym]

Thank you for this tutorial. I feel like the documentation for react-redux, redux, and thunk are all so confusing and don't really follow any step by step guide on how to get started building this sort of app. The tutorials they have start off well, then cut off randomly, leaving you to wonder how to even build a store lmao.

This video was wonderful at helping me remember what to do when it comes to starting an app with all these packages. Thank you again!

[devmrin]

This video should be on official docs as a refresher. Super easy! Great job!

[sahilsharmafrank]

Great way of explaining its a step by step tut to understand. React -> redux -> thunk as simple as it can be.

[marcellusjones]

Contents gold, and you have a radio voice perfect. You're going to be my new guy. Thank you

[apuroopbusetty]

Found it very useful for redux and thunk explanation

[baremetals]

how would you handle form errors coming from the server. for example I can create users however I cannot get my for errors to display on the form. How do I access the form errors from the server?

[vaibhavmehta]

i am getting this error can some onehelp me out at 20:00
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
in button (at App.js:7)
in div (at App.js:6)
in App (created by ConnectFunction)
in ConnectFunction (at src/index.js:11)
in Provider (at src/index.js:10)

[ozanmuldur]

Web dev junkie? lol this is me dude :) or all people in this channel?

[amlife]

these technologies are from 4 years ago and people moved on to use React context api or other libraries that use less boilerplate like undux

[patrickconrad]

using context is close to redux but wrapping multiple contexts makes it messy. not sure if they have done anything about this yet

[iliketocode]

But can't you just use javascript? Why need a thunk

[megphillips-]

As new as this tutorial is, you may consider using the new hooks as is recommended in documentation.

[kenansari]

Amazing content, i gave a big Thumb up Thank you for your wokr.

[iamchets]

instead of connect, theres a useDispatch hook

[andrewaghoghovwia]

I was hoping I'd see something more on redux thunk..turns out this is more redux ..

[gregoryolenovich]

I'm just here to leave silly comments

[timurakhalaya]

Please write a clean code even when filming a tutorial