Visão Geral

Curso Introduction to Redux for React using TypeScript Redux é um contêiner de estado previsível para React. À medida que os aplicativos React se tornam mais complexos, os desenvolvedores geralmente encontram a necessidade de mais estrutura em torno dos dados ou estados que estão gerenciando em seus aplicativos. A biblioteca Redux JavaScript fornece uma solução elegante para essa necessidade.

Esta introdução ao Redux for React usando o treinamento TypeScript ensina aos desenvolvedores as habilidades necessárias para usar o Redux imediatamente em seus aplicativos React.

Nota: Esta classe Redux também pode ser ensinada usando JavaScript/ECMAScript.

Objetivo

Após realizar este Curso Introduction to Redux for React using TypeScript, você será capaz de:

1. Compreender a gestão do estado, incluindo quando é necessário e as várias alternativas
2. Utilize o Redux para gerenciar o estado do aplicativo
3. Use React e Redux juntos
4. Implemente as melhores práticas de React e Redux
5. Escreva testes de unidade para React usando Jest e React Testing Library

Pre-Requisitos

Requisitos de software:

Google Chrome e/ou Firefox

Outros navegadores modernos conforme desejado

IDE/ambiente de desenvolvimento de sua escolha

Materiais

Conteúdo Programatico

Introduction

1. State Management
2. What is State?
3. When do you need a State Management library?
4. Alternatives to Redux
5. Using Context for Shared State
6. Server State: React Query, SWR, or GraphQL client

Redux

1. What is Redux?
2. Benefits Checklist
3. Principles of Redux
4. Core Concepts (Store, State, Reducers, Actions, Action Creators)
5. Complementary Packages
6. When do you need Redux?
7. Basic Redux Example (includes time traveling)
8. Gotchas/Tips

Using Redux with React (React Redux Library)

1. Redux with React in Function Components
2. useSelector and useDispatch Hooks
3. Provider
4. Example
5. Redux with React in Class Components
6. Higher-Order Components
7. The connect function
8. Writing mapState functions
9. Writing mapDispatch Functions
10. Example

Asynchronous Actions (Redux Thunk)

1. Overview
2. Async Actions (Thunks)
3. Installation
4. Your First Thunk
5. Full CRUD Example

Putting It All Together (React & Redux & Thunk)

1. Redux with TypeScript
2. Benefits
3. Installing
4. Usage with:
5. State
6. Actions & Action Creators
7. Reducers
8. Connect (React Redux)

Unit Testing

1. Tools (Jest, Enzyme, JSDOM)
2. Syntax
3. Testing Vanilla JavaScript with Jest
4. Mocking
5. Mocking Modules
6. Mocking Functions
7. Debugging Tests
8. Testing Redux Actions & Thunks, Reducers, HTTP calls

Performance

1. What causes a component to render?
2. Wasted Renders
3. Memoization
4. React.memo
5. Pure Components