iRazoo Analysis

readme.md

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