TypeScript com ReactJS, Redux e Redux Saga | Diego Fernandes

[@chapzin1]

Parabens Diego, poderia colocar no curso do bootcamp um crud completo em typescript, backend, frontend (reactjs), mobile(react native)

[@krystiangraupner900]

Curso muito bom Diego, parabéns, eu não achei em nenhum lugar as libs que você adicionou no inicio do curso, então resolvi colocar aqui nos comentários para o pessoal que for fazer o curso não precisar digitar tudo. Libs: eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

[@LuizSantos-ye2qm]

Que homem!

[@MrWildmarks]

Show Krystian, vai ajudar muita gente cara.

[@ericdecolsales3066]

O tipo de gente que vale a pena ser colega de trabalho, obrigado demais

[@gabrielhipolito8451]

não é um dev não, é um prefeito

[@edymbhify]

Fala com muita fluidez, lógico e objetivo! Parabéns!

[@tiagoantonio7497]

Esse vídeo só me mostrou que eu tenho uma grande estrada pela frente, to vindo do javascript (e nem sou nível expert em js).

[@gualtersantos8227]

Obrigado Diedo, esta aula me ajudou muito, talvez eu já esteja bem atrasado, conhecendo para que serve e como funciona o Redux e Redux-Saga só agora... Mas foi bom ter assistido mais esta aula, com um pouco de prática agente chega lá kkkk

[@LeonardoLuzx]

Na documentação oficial de hoje não mostra como importar os tipos padrões do Dispatch e Action, aprendi isso nesse video agora.

[@carlobatera]

Poxa Diego, que vídeo sensacional. Deu pra aprender bastante e o conteúdo foi bem avançado ai. Bora colocar um módulo lá no Bootcamp usando o TypeScript.

[@eduwric]

Pra não precisar criar uma interface ApplicationState e ter que adicionar um item novo toda vez que for criado um novo reducer, tem como criar um tipo da seguinte maneira: type ApplicationState = ReturnType

[@doutorsamuel]

Muito bom o conteúdo Diego. Que tal fazer um vídeo ou um post no blog para usar tudo isso que vc mostrou com typescript incluindo o redux sauce

[@ERosostolato]

Amigo, uma sugestão de vídeo é vc explicar sobre o negócio por trás de usar redux, states e tal. Eu tenho experiência em angular e não uso um store, quando preciso de um dado externo eu apenas chamo o http na hora, então tenho muito problema pra entender esse pacote react e redux... Aliás parabéns pelo vídeo

[@YuriEdmundo]

Considerando um módulo de Auth que tem Login, Register e ForgotPassword, nessa estrutura você criaria uma pasta pra cada item desses? /ducks/login- /ducks/forgot - ducks/register ? Ou você faria um bolo jogando tudo dentro de /ducks/auth ?

[@andrejunqueira4919]

Parabénsss Diego muito top o conteúdo. Seria legal fazer um video sobre o Flow !

[@TiagoDiass2]

O código mostrado no video não está mais funcionando, o typescript reclama que o yield tem um tipo any implícito no saga que carrega os repos. Pra conseguir fazer funcionar tive que apagar minha node_modules, copiar o package.json e o tsconfig.json do repositório da rocket(que tá com o link na descrição) e ai rodar o yarn install denovo, a versão mais nova do typescript que está vindo no create-react-app está dando problema nesse yield...

[@leandrubraga]

Na função function* load() {} muda pra function* load(): SagaIterator {}. Importa o SagaIterator de import { SagaIterator } from '@redux-saga/types'; Faz o mesmo no rootSaga.ts => export default function* rootSaga(): SagaIterator {}.

[@pedrobarros6163]

Justamente a tipagem que eu precisava

[@felipegraf5955]

e 1 ano depois o cara me salvou, valeu!!

[@alan_oandrade]

Merece um remake atualizado desse vídeo né? Pelo menos da parte do Redux com typescript.

[@rocketseat]

Estamos produzindo um bônus atualizado agora mesmo para os alunos do bootcamp, quem sabe sai um conteúdo gratuito também 🚀💜

[@alan_oandrade]

Booaaa vou ficar de olho, tô tentando implementar aqui baseado nas aulas da turma passada mas tô apanhando da tipagem. Esse bônus tem previsão de quando deve sair? Vai ter a parte do Reactotron com Flipper tbm? E se tiver aquela offline queue do redux que tem num outro vídeo antigo também ia ficar completasso!!

[@isaipack]

Nossa, podia muito. To sofrendo HORRORES pra usar isso com os hooks... Aliás, alguma ideia? Disparo as ações mas o saga não escuta...

[@alan_oandrade]

@@isaipack Como vc ta fazendo? Ta usando typescript? Com javascript eu consegui fazer de boa, só com typescript que to apanhando das tipagens. Está fazendo no React Native ou ReactJS? Aqui um exemplo que fiz com RN, se quiser um com ReactJS tem aí tbm o gobarber-Web github.com/alanfoandrade/Rocketseat-ReactJS-GoBarber-Mobile

[@supersalgadin4392]

@@rocketseat qual trilha do ignite pois eu nao encontrei redux na trilha reactjs

[@FagnerGomesPlus]

Muito bom... Só me perdi no sagas, mas vou dar uma estudada maior!

[@marcosradix1]

Cara é muito legal sabe, eu comecei programar front com jsf depois reactjs e depois angular, prefiro angular, já tentei várias vezes entender essa parte de estado que redux usa e não entra na minha cabeça, é muito arrodeio, queria muito aprender react acho ele mais performático que angular, mas sempre esbarro na mesma coisa, state🤯

[@Black_void375]

revendo o video em 2024 para trabalhar em um legado

[@axsilvasousa]

Massa! Tem algum video usando o adonisJS com typescript?

[@bkunace]

Como fica no Reactnative? Alguma modificação ou segue o mesmo padrão?

[@LucasdeAlmeidaMarciano]

Como configuro esse autocompletar no terminal ?

[@DiegoArcega1]

valeuu Diego, coincidentemente tinha comecado um projeto com exatemente essa stack, vou melhorar ele com as tuas dicas, abraco!

[@designdesobrancelhasperfei4249]

Excelente conteúdo Diego muito top! Cara você não teria um CRUD completo nessa arquitetura, estou com dificuldade para fazer um crud usando React, TypeScript , Redux e Redux Saga. E não estou conseguindo fazer funcionar.

[@josiclerlemesilva4062]

Muito bom eu adore a vídeo aula!!!

[@lemoncoders]

Redux Saga + Typescript step by step guided examples: github.com/Lemoncode/redux-sagas-typescript-by-example

[@douglasdennys471]

Diego tem como eu implementar por exemplo o reduxsauce com typescript?

[@lcws]

Conteúdo sempre de qualidade da Rocketseat! Nessa videoaula fiquei como uma dúvida: Por que não usar types.d.ts ao invés de types.ts, por exemplo?

[@mateushenrique6421]

O .d.ts seria para uma definição de tipos de uma lib por exemplo algo que não se tem como importar diretamente

[@MarcellStone]

Fala Diego, blz? Existe a possibilidade de um parte 2 desse vídeo usando Formik? Acho que seria sensacional! Parabéns pelo trabalho, muita saúde!

[@m97199]

Sempre incrível... Nada melhor que informação clara

[@gabrielcosta6917]

Diego, atualmente vc ainda utiliza essa mesma arquitetura, ou mudou alguma coisa?

[@matheusisquierdo1]

Na output do ESLINT estava acusando a falta da dependência eslint-config-react-app. :D

[@pedrolucasoliva]

yarn add eslint-config-react-app -D

[@rafaelviegas995]

Boa noite. Depois você poderia trazer um vídeo explicando melhor a atualização na documentação de como navegar entre telas no React Native? Abraço!

[@jonasmendes350]

Diego gostaria de saber como fica configuração para compilar tudo que está em typeScript e gerar os arquivos para js para ambiente de produção

[@gabrielpadron6555]

quais são as extensões que você usa no vscode?

[@rafaelcarvalho2918]

Fala fera. Eu consigo usar o redux saga no react native.

[@alvaro1337]

thanks! I have a doubt, how do I send a body from a react component to a saga function?

[@aleftenorio6369]

Vale a pena usar Typescript no react native??

[@lucastavares206]

Cara, typescript n era usado apenas no angular? Pra mim react era feito com jsx

[@jeffersonsilva2958]

Utilidade pública: yarn add eslint-config-airbnb eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-import-resolver-typescript eslint-config-prettier eslint-plugin-prettier prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

[@johnazedo]

Qual o tema que você usa no zsh?

[@datafenix]

Parabéns, muito bom o vídeo.. Teria como vc compartilhar o o arquivo settings.json??

[@snk-js]

{ "name": "react-config-for-typescript", "version": "0.1.0", "private": true, "dependencies": { "@types/jest": "24.0.23", "@types/node": "12.12.14", "@types/react": "16.9.14", "@types/react-dom": "16.9.4", "axios": "^0.19.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-redux": "^7.1.3", "react-scripts": "3.2.0", "redux": "^4.0.5", "redux-saga": "^1.1.3", "typesafe-actions": "^5.1.0", "typescript": "3.7.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react-redux": "^7.1.7", "@types/redux-saga": "^0.10.5", "@typescript-eslint/eslint-plugin": "^2.18.0", "@typescript-eslint/parser": "^2.18.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^6.9.0", "eslint-config-react-app": "^5.1.0", "eslint-import-resolver-typescript": "^2.0.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.18.0", "prettier": "^1.19.1" } }

[@yangoncalves1520]

gist.github.com/diego3g/b1b189063d21b96d6144ca896755be64

[@andremurilo9662]

Puro hype 🔥

[@Gabriel-kl6bt]

Como que faz a lista de repositórios com f unction component?

[@torrescle]

No component Repository list foi definido que loadStart() não retorna nada(void), mas essa action não retorna um objeto(com type:...)?

[@matheusgeres]

Qual tema do ZSH você está usando?

[@princevasconcelos116]

Vlw pelo vídeo cara!! tu é foda

[@thiagocavalcanti]

Alo Diego. Faltou o eslint-config-react-app

[@ThiagoOliveira-mh1gu]

Valeu amizade !!!

[@emmanuelmiojooj6460]

vlw

[@alexandrerios1502]

acredito que seu erro seja : ESLint: Failed to load config "react-app" to extend from. parece que é um erro da versão 6.x do ESLint, e uma dica que deram era atualizar, a versão 6.8.0 é a mais recente, e está dando o mesmo erro pra mim.

[@fabiomaiorano]

Vlw Diego!

[@tavareshenrique]

Sensacional Diego! Ficou muito bom! Mas eu tenho uma dúvida que não fico claro, se puder me ajudar, por favor. Qual seria a vantagem de usar TypeScript com essas tecnologias?

[@felipetiagofp]

Alguem sabe porque ta dando esse erro no import React from 'react' ? => Definition for rule '@typescript-eslint/no-angle-bracket-type-assertion' was not found.eslint(@typescript-eslint/no-angle-bracket-type-assertion) ??? Obrigado

[@AdrianoMoreira1994]

Excelente vídeo, porém me tira uma dúvida. Quando eu rodo aqui na minha máquina create-react-app frontend --typescript ele gera o projeto da forma padrão com JS, e eu vi que no seu projeto veio com typescript

[@AdrianoMoreira1994]

@@matheuslima6763 Valeu cara, funcionou aqui

[@eltonmarques2]

@@AdrianoMoreira1994 Como você conseguiu resolver?

[@ryanlemos5703]

@@eltonmarques2 Tenta utilizar --template=typescript. yarn create react-app nome_projeto --template=typescript

[@KROMMASyS]

Te amo muitao

[@romulorocha947]

Muito BOM!

[@max8173-b6w]

esse typescript é bem chato de trabalhar, aqui o vscode fica acusando erro dai quando eu fecho o vscode e abro ele de novo o erro desaparece, to me coçando pra usar apenas javascript.

[@marks5196]

Rapaz n consigo acompanhar essa aula, falta dependencia ai instalo, começa dar problema no eslint falando que n pode extender o react-app ai coloco outra dependencia, e começa a dar problema em tudo, essa parte de instalaçao do typescript e mt enjoada.

[@omaiquealmeida]

SHOOOW!!! Let's see!!! \o/

[@JoniXZ]

Eu li tesseract, aí vim ver os comentários pra ver se mais alguém pensou isso, porém ninguém pensou Ainda eu acho 😅

[@augustohtp]

Olá, boa tarde. Para essa estrutura como funciona o envio de parâmetros pra requisição?

[@rocketseat]

Faala, Augusto! Tudo bom? 💜 Você já conhece nossa comundade aberta? Por lá você pode mandar essa e outras dúvidas que tiver! 💜 Segue o link: www.rocketseat.com.br/comunidade

[@augustohtp]

@@rocketseat Opa, obrigado pela atenção!! Vou dar uma olhada lá. Parabéns pelo trabalho!

[@fernandomaximo9179]

Estou recebendo o seguinte erro no settings.json "Auto Fix is exabled by default. Use the single string form" para esta configuração: "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ]

[@fernandomaximo9179]

encontrei: "Improved TypeScript detection - As soon as TypeScript is correctly configured inside ESLint, you no longer need additional configuration through VS Code's eslint.validate setting."

[@rocketseat]

Boa Fernando!!

[@gabryelfhsoares]

Estou apanhando para fazer as rotas com redux-saga, alguém pode dar uma dica?

[@ardkey4644]

poderia atualizar a versão do ecma no git!

[@rocketseat]

Valeu demais pela sugestão! 🚀

[@viniciusneto6824]

Dá pra usar Redux e Redux Saga utilizando Typescript, React Hooks e Function Components?

[@quant.481]

sim

[@quant.481]

ve na documentação do react redux. tem uns exemplos la

[@viniciusneto6824]

@@quant.481 Valeu! Vou dar uma olhada.

[@viniciusneto6824]

Ah! Ele acabou mostrando como fazer nos últimos 3 minutos do vídeo! Haha! Não sabia pois tava codando aqui junto kkk

[@rocketseat]

Boa Vini! 💜

[@Flipkurama]

Alguem sabe se houve alguma mudança pras atualizações? Estou com problema no store. Da o seguinte erro, na const store no arquivo /src/store/index.ts: TypeScript error in /home/flip/Projetos/Fronts React/mestre-rifas/src/store/index.ts(14,7): Type 'Store & { dispatch: Dispatch; }' is not assignable to type 'Store'. The types returned by 'getState()' are incompatible between these types. Property 'rifas' is missing in type 'CombinedState' but required in type 'ApplicationState'. TS2322 12 | const sagaMiddleware = createSagaMiddleware(); 13 | > 14 | const store: Store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); | ^ 15 | 16 | sagaMiddleware.run(rootSaga); 17 |

[@rocketseat]

Faala, Filipe! 💜 Você já conhece nossa comunidade aberta? Por lá você pode tirar essa dúvida! 💜 Segue o link: www.rocketseat.com.br/comunidade

[@lucasdev25]

Pessoal tive esse problema aqui: Property 'loadRequest' is missing in type '{}' but required in type 'Pick'.ts(2741) index.tsx(16, 3): 'loadRequest' is declared here. No meu arquivo App.tsx const App = () => ( ////// ESTA DANDO ERRO AQUI, COMO SE ELE ESPERASSE QUE EU MANDASSE O loadRequest ); Alguem pode ajudar?

[@jonathas231096]

conseguiu resolver?? aconteceu a mesma coisa aqui

[@lucasdev25]

@@jonathas231096 nao...eu simplesmente deixa uma volta nesse problema. Deixamdo valor default

[@leonardoavelino6137]

1 -> Em components/RepositoryList/index.tsx certifique se sua linha está assim : const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(RepositoriesActions, dispatch); E se caso o eslint 'reclamar' em .eslintrc.js você pode colocar essa configuração dentro de rules: 'max-len': ["error", { "code": 120 }] ficando assim: ...outrasInfos rules: { 'max-len': ["error", { "code": 120 }], ...outrasInfos } ...outrasInfos

[@Onlinesmartv]

Joinville santa Catarina salve Diego aii blz

[@realfootball338]

I Love Angular !!!

[@playhacker-4787]

Eae Diogo te conheci no canal do felipe. Tenho 17 anos e moro em Chapecó-SC . Meu nome e Odair 👊

[@voguh__]

pra react typescript é melhor usar classes ou funções? particularmente prefiro funções, alias deveria ter um tutorial de path alias do react typescript, uso o craco no reactjs, mas quando vou usar typescript me da ranço, primeiro o c* do tsconfig nao salva o "path" pra usar o intelisense e segundo o craco nao funciona

[@snk-js]

pela mor de deus, alguém tem esse repositório pronto?

[@danteanjos_]

Então usar Typescritp elimina a necessidade do PropTypes? Não suporto mais proptypes kkkkk

[@alissonlucas9394]

muito bom, falta só falar um pouco mais devagar

[@natsuedits6884]

Como ele acertou meu nome no começo

[@gustavoleite7569]

Maneira menos verbosa de typar a ApplicationState. código: type ApplicationState = ReturnType const store: Store = createStore(rootReducer)

[@rocketseat]

Boa Gustavo!! 🚀

[@MarceloMaia2]

Fica com Jesus

[@AoFsNIPERzZ]

O famoso "código espaguete" kkkkkkkk

[@abiliobittencourtjunior2222]

Queria ver como passar funções pra um componente filho

[@GabrielGarcia-yj2jp]

Criar um jogo

[@realfootball338]

React gumno !!!

[@DhavalJavia]

Would have been great if i was able to understand what he's saying!!!....English please?

[@EnriqueMartinezInter]

I wish u could teach in english too

[@Rattones]

aí vc praticamente 'transformou' o React no Angular ...