https://github.com/fabiomirandaa/simple-todo-ngrx

Projeto de TodoList com uma básica implementação de NGRX, para entendimento dos conceitos.
https://github.com/fabiomirandaa/simple-todo-ngrx

angular angular-example angular-example-app ngrx ngrx-effects ngrx-example ngrx-store redux typescript

Last synced: about 1 year ago
JSON representation

Projeto de TodoList com uma básica implementação de NGRX, para entendimento dos conceitos.

• Host: GitHub
• URL: https://github.com/fabiomirandaa/simple-todo-ngrx
• Owner: fabiomirandaa
• Created: 2020-04-05T21:11:57.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T02:57:45.000Z (almost 2 years ago)
• Last Synced: 2025-03-23T18:51:44.548Z (about 1 year ago)
• Topics: angular, angular-example, angular-example-app, ngrx, ngrx-effects, ngrx-example, ngrx-store, redux, typescript
• Language: TypeScript
• Homepage:
• Size: 3.6 MB
• Stars: 12
• Watchers: 2
• Forks: 6
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# SimpleTodoNgrx

Projeto desenvolvido para servir de estudo para o conceito de Effects. É um WebApp de Todo-list muito simplificado.

Esse projeto foi gerado pelo [Angular CLI](https://github.com/angular/angular-cli). Se encontra na versão 12.1 do Angular.

### Como rodar o projeto

Com node 12+ instalado, rodar o comando `npm install` e após finalizar a instalação, rodar o comando `npm run start`

## Resumo do conceito

Para entendimento deste resumo, você precisa entender os conceitos básicos do Redux. Aviso dado, vamos ao resumo.

Basicamente os Effects é a forma que temos para garantir o tratamento de efeitos colaterais ao dispararmos Actions. Não podemos esquecer que no Redux, os Reducers devem ser feitos com funções puras. 

Então quando criamos um Effect, estamos garantindo que Actions que necessitem de consultas externas,por exemplo, tenham também um tratamento de possíveis erros e possam direcionar o disparo de Actions específicas para momentos de erro.

O Exemplo deste projeto, é o Effect de loadTodos. Vejam:

```typescript

  loadTodos$ = createEffect(() =>

    this.actions$.pipe(

      ofType(getTodos),

      switchMap(() => {

        return this.loadAllTodos();

      })

    )

  );

    private loadAllTodos() {

    return this.todoService.getTodos()

    .pipe(

      map((todos) => {

        return { type: TodoActionTypes.LoadTodos, todos };

      }),

      catchError((error) => of({ type: TodoActionTypes.Error, message: error }))

    );

  }

```

Como é possível ver, temos um efeito que monitora a ação de `GetTodos`. Nesse efeito, temos ali no método genérico de carregamento de Todos o tratamento de erro, fazendo com que seja chamada a Action específica de erro caso ocorra algum problema com a chamada HTTP.