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.