Skip to content

Instantly share code, notes, and snippets.

@thulioph
Last active Dec 12, 2017
Embed
What would you like to do?
iRazoo Analysis

Código

https://github.com/labcodes/react-redux

Slides

https://speakerdeck.com/thulioph/redux-101

Anotações

  1. Atualizar o readme
    1. src/data?
    2. src/routes?
  2. Utiliza um middleware em nodejs
    1. express
  3. Utiliza JWT
    1. para autenticação
  4. Utiliza o thunk para disparar actions assíncronas
  5. Estrutura das páginas
    1. src/pages (atualmente)
    2. src/containers (aconselhável)
  6. Estrutura dos componentes
    1. dashboard/Dashboard.js (atualmente)
    2. dashboard/index.js (aconselhável)
  7. Rotas
    1. Toda a lógica das rotas deveria ficar no mesmo lugar
    2. é utilizado dentro da página de login
  8. Padronização de código
    1. é preferível criar constantes antes do return do render, ao invés de no render utilizar this.algumaCoisa (Login.js)
  9. Componentes que apenas renderizam algo (src/pages/dashboard.js)
    1. podem ser escritos utilizando JSX
    2. não tem necessidade de constructor
    3. o state pode ficar fora do constructor
  10. múltiplos componentes no mesmo arquivo (src/pages/dashboard.js)
    1. dificulta o teste
    2. dificulta o re-aproveitamento
  11. Repetição de código do footer
    1. src/pages/errorpage.js
    2. src/pages/login.js
  12. Requisições
    1. devem ser feitas no componentDidMount ao invés do componentWillMount (src/pages/template.js)
    2. Deve-se separar o fetch das actions (src/actions/templates.js)
  13. Lógica
    1. Deve-se separar a lógica de actions
    2. criar um arquivo para realização do fetch
    3. as actions não devem realizar requisição (src/actions/**.js)
  14. CSS
    1. o arquivo theme.scss faz um import de uma URL do google fonts, onde a mesma, poderia ser adicionada ao header e carregada pelo HTML
  15. Redux
    1. actions/reducers/store
    2. normalmente ficam no mesmo arquivo
    3. actions para diferentes ações, e comportamentos compartilhados

Sugestões

  1. Se você precisa que uma determinada ação, ou dado, seja compartilhado entre os componentes/containers, esta informação deve vim de uma store.
  2. Diminua a quantidade de código atrelado ao framework e escreva mais javascript
    1. utilização de JSX
  3. Escreva pequenos componentes, que possam ser re-aproveitados
  4. Remova código não utilizado
    1. handleEmptyState (src/pages/dashboard.js)
    2. existem mais coisas como essa em outros códigos
    3. chatToggle (src/components/layout.js)
    4. a linha 80 é complicada de entender o que vai acontecer na classe
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment