Redux do CONCEITO a PRÁTICA! Migrando Redux Antigo para Redux Toolkit (Tutorial)

Uma aula completa para você nunca mais ter dúvidas de como o Redux funciona. Do conceito a prática, passando pelo Redux Antigo até o Redux Toolkit.

O que você aprenderá nesse tutorial?

Os principais conceitos exigidos para vagas de emprego. Entenderá o que é uma Action, um Reducer e um Store. Aprenderá os conceitos de dispatch e global state e como tudo isso se comunica no que chamadas de Data Flow do Redux.

Como implementar o Redux em seu aplicativo ReactJS ou React Native. Verá primeiro o modo "antigo" com uso do HOC connect, e a realizar os famosos mapStateToProps e mapDispatchToProps.

Substituir os items citados acima pelos hooks useSelector e useDispatch.

Aprenderá a nova forma de usar a biblioteca, o Redux Toolkit, faremos isso através da migração do Redux Antigo implementado no passo anterior. Para isso usaremos as função createSlice e configureStore.

Código completo do Tutorial: https://github.com/coffstack/redux-tu...

✅ VOCÊ TAMBÉM VAI GOSTAR DESSES VÍDEOS:

▸ Programador Sênior | O que Faz? Como se tornar um? (Dicas e Relato Pessoal)
   • Programador Sênior | O que Faz? Como se to...  

▸React Query Tutorial em TypeScript - Queries, Mutations e Query Invalidation
   • React Query Tutorial em TypeScript -  Quer...  

▸ Playlist DICAS de CARREIRA
   • Плейлист  


✅ REDES SOCIAIS:

Instagram: @coffstack
  / coffstack  

TikTok: @coffstack
  / coffstack  

Twitter: @coffstack
  / coffstack  

Blog/Artigos
https://blog.coffstack.com/

Instagram: @lucasgar6
  / lucasgar6  

00:00 - Sumário da Aula
01:53 - O que é o Redux?
03:56 - Redux Data Flow
05:12 - Store, Action e Reducer
07:07 - Como o Redux Funciona (Data Flow)
10:00 - Redux Antigo - Iniciando Projeto
12:47 - State e Store (Antigo)
14:22 - Reducer e Imutabilidade (Antigo)
17:48 - Redux Provider
18:38 - HOC connect (Antigo)
20:08 - mapStateToProps (Antigo)
22:07 - Redux DevTools (Antigo)
23:40 - mapDispachToProps (Antigo)
27:09 - DevTools na Prática
28:03 - Dispatch Action com Payload (Antigo)
31:32 - useSelector (Redux Hooks)
33:58 - useDispatch (Redux Hooks)
36:12 - Redux Toolkit
37:30 - Reducer e Actions (Toolkit)
45:27 - Store (Toolkit)
48:38 - A Retrocompatibilidade entre Redux Antigo e Toolkit
49:50 - Dispatch Action (Toolkit)
51:27 - Redux e TypeScrtipt - hooks customizado
56:34 - Conclusão

#redux #reactjs #reactnative #toolkit #typescript #javascript #frontend