Skip to content

prefeitura-rio/mapa-realizacoes

Repository files navigation

Mapa de realizações da prefeitura.
Inspirado no Google Maps ©

Projeto fullstack criado com:

  • React
  • Redux
  • Redux Saga
  • Leaflet
  • Firebase (backend da aplicação)

Redux / Redux-Saga

Este projeto utiliza Redux e Redux-Saga para gerenciar o estado da aplicação e efeitos colaterais assíncronos. A estrutura de diretórios do Redux segue uma abordagem modularizada, onde diferentes recursos (como autenticação, comentários, imagens, lugares, etc.) têm suas próprias subpastas.

Estrutura de Pasta

/redux
|-- /auth
| |-- actions.js
| |-- reducers.js
|-- /comments
|-- /images
|-- /places
|-- ...
. ...
. ...
. ...
|-- reducers.js
|-- sagas.js
|-- store.js

Cada subpasta contém dois arquivos principais:

actions.js - Define as ações que podem ser despachadas.
reducers.js - Define como o estado muda em resposta a uma ação.
Além disso, temos três arquivos na raiz do diretório Redux:

reducers.js - Combina todos os reducers em um.
sagas.js- Define sagas para lidar com efeitos colaterais assíncronos.
store.js - Configura e cria a Redux Store.

Exemplo: Autenticação (auth) actions.js

Aqui definimos várias ações relacionadas à autenticação
export const LOGIN_REQUEST = "LOGIN_REQUEST";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAIL = "LOGIN_FAIL";

reducers.js

import { LOGIN_FAIL, LOGIN_REQUEST, LOGIN_SUCCESS, LOG_OUT } from "./actions";
...

Redux-Saga

O Redux-Saga é utilizado para efeitos colaterais assíncronos, como chamadas API.

sagas.js Este arquivo contém várias sagas que lidam com diferentes aspectos da aplicação. Por exemplo, para a autenticação, temos:

async function loginFirebase() {
  // ... (código para autenticação)
}

function* workerLogin() {
  try {
    yield put(loginRequest());
    const data = yield call(loginFirebase);
    yield put(loginSuccess(data));
  } catch (error) {
    console.log(error);
    yield put(loginFail());
  }
}

export function* watchLogin() {
  yield takeEvery(LOGIN, workerLogin);
}

Como rodar Saga

No arquivo store.js, o middleware do saga é aplicado e a saga raiz é executada.

const sagaMiddleware = createSagaMiddleware();
// ...
sagaMiddleware.run(rootSaga);

Configuração do ambiente

  • Baixe este repositório como um arquivo ZIP usando o botão acima e descompacte-o. Se você estiver usando git, clone este repositório.
  • Instale as dependências listadas no arquivo package.json:
npm install
  • Para rodar o ambiente de desenvolvimento:
npm start

Instalação e dependências

Este aplicativo foi construído e testado usando

  • Node version v14.17.6
  • NPM version 6.14.15

⚠ Credenciais do firebase - firebase.js ⚠

As credenciais do firebase estão no arquivo firebaseconfig.js.

Esse arquivo não se encontra neste repositório. Este arquivo é
de uso exclusivo dos desenvolvedores do escritório de dados.

Releases

No releases published

Packages

 
 
 

Contributors 4

  •  
  •  
  •  
  •