README.md

Dummy Code

Este projeto está sendo desenvolvido em Live com o objetivo de aprender novas técnias e treinar outras.

Proposta

Ser um local de envolvimento para desenvolvedores (Não importa se é Backend, Frontend, DevOps ou Designer. Se você está envolvido nessa área, serve).

📌 Tabela de Conteúdos

• 📌 Inicialização
• 👷 Instalação
• 🏃 Primeiros passos
• 🏗️ Estrutura
• 💻 Tecnologias
• 🤔 Como contribuir

👷 Instalação

Inicialmente você deve ter em sua máquina NodeJS, Yarn, Git e então use um dos comandos abaixo para clonar este repositório:

Se estiver usando HTTPS:

git clone https://github.com/jeanmolossi/dummy-code.git

Se estiver usando SSH:

git clone [email protected]:jeanmolossi/dummy-code.git

Ou então com a Github-cli:

gh repo clone jeanmolossi/dummy-code

e após isso executar

yarn

🏃 Primeiros passos

Extensões recommendadas VSCode:

• Eslint
• Prettier
• Prettier-eslint
• Editor config
• Styled components
• Bônus
  • Material Icon Folder Theme

Após os passos de instalação você deve acessar a pasta raiz do projeto e usar o comando:

yarn start:api

&&

yarn start:dev

🏗️ Estrutura

📂 Diretórios

src/
  assets/
    images/
    styles/
  components/
    layout/
    shared/
  pages/
  routes/
  store/
    modules/
  utils/

💻 Tecnologias

• styled-components;
• redux;
• redux-saga;
• framer-motion;

💊 Redux + Redux Saga

Dentro de store há a seguinte estrutura de diretórios e arquivos:

store/
  modules/
    example/
      actions.ts
      index.ts
      reducer.ts
      saga.ts
      types.ts
    rootReducer.ts
    rootSaga.ts
    rootTypes.ts
  index.ts

• store/index.ts é responsável por criar e exportar o store;
• store/modules/rootReducer.ts é responsável por combinar os reducers dos modules subsequentes e exportar um único reducer central para o store;
• store/modules/rootSaga.ts é semelhante ao rootReducer.ts porém sua entidade é o saga de cada modulo;
• store/modules/rootTypes é responsável por qualquer tipo de tipagem compartilhada entre todos os módulos e pelos Roots;
• store/modules/example
  • actions.ts responsável pela declaração das actions do módulo;
  • index.ts responsável pela exportação centralizada do módulo;
  • reducer.ts responsável pelo controle de estado do módulo. Logo, mutações de estado devem ficar neste arquivo;
  • saga.ts responsável por side effects em estados. Qualquer tipo de mutação de estado assíncrono deve resgatar os dados para o payload dentro do saga antes de disparar (dispatch) uma action. Actions assíncronas devem ser compostas por uma estrutura de 3 actions:
    • @module/ACTION_REQUEST;
    • @module/ACTION_SUCCESS;
    • @module/ACTION_FAILURE;
  • types.ts responsável pela tipagem de actions, reducer states e payloads;
    • Toda action deve extender a rootType ActionReturnType<A, T>;

✍️ Escrita de tipagem

Em store/modules/rootTypes.ts há um tipo que deve ser extendido para cada action em cada módulo.

A estrutura de ActionReturnType<A, T> é a seguinte:

export type ActionReturnType<A = string, T = any> = {
  type: A;
  payload: T;
};

onde A é sua action type @module/EXAMPLE e T é o tipo do que virá através do payload:

export type PayloadExample = {
  any_object: {
    any_data: any;
    any_other_data: any[];
  };
  any_array: any[];
};

O resultado final da action dentro do módulo, seria algo como:

export type ExampleAction = ActionReturnType<'@module/EXAMPLE', PayloadExample>;

Para cada novo módulo deve ser adicionado ao RootState o Tipo do Estado do novo módulo:

store/modules/newExample

agora com o novo módulo newExample, interface RootState deve estar dessa forma:

export interface RootState {
  example: ExampleState;
  newExample: NewExampleState;
}

❓ Questões ocasionais

• Por que há um index.ts dentro de algumas pastas?

R: Para exportação. Este index deve conter a exportação de componentes e afins das subpastas daquele modulo.

Exemplo:

pages/
  profile/
  courses/
  index.ts

Conteúdo index.ts:

export { default as Profile } from './profile';
export { default as Courses } from './courses';

---

• Por que usar Redux?

R: Redux é um excelente gerenciador de estados. Com o intuito de aprendizado de ferramenta usaremos Redux + Saga para tal neste projeto.

Para outras questões, fique a vontade para me chamar no discord jeanmolossi#3153 ou no telegram. Assista também às minhas Lives na Twitch.

🤔 Como contribuir

• Faça um fork desse repositório;
• Cria uma branch com a sua feature: git checkout -b minha-feature;
• Faça commit das suas alterações: git commit -m 'Feat: Minha nova feature';
• Faça push para a sua branch: git push origin minha-feature.

Depois que o merge da sua pull request for feito, você pode deletar a sua branch.