bhanwari devi
vamp
Bhanwari Devi é uma mulher de casta oprimida que ousou lutar contra as estruturas feudais, castanhas e patriarcais da zona rural do Rajastão. Ela começou como assistente social como parte do projeto de desenvolvimento de mulheres administradas pelo governo. Em 1992, ela se envolveu em campanhas específicas contra o casamento infantil. Ela aconselhou as mulheres sobre planejamento familiar, educação de meninas, contra feticida feminina, dote e casamento infantil. Como resultado de seu ativismo, ela e sua família já foram submetidas a ameaças constantes e intimidação dos homens de castas dominantes na vila.
Uma vez ela interveio para parar o casamento de uma criança de nove meses de uma família de castas dominante. Isso enfureceu os homens de castas dominantes na vila. Apesar de saber as consequências que provavelmente, ela ousou continuar a desafiá -las e defendê -las o que era certo. No mesmo ano, em um ato de retaliação, ela foi estuprada e seu marido surgiu enquanto trabalhava no campo.
Em sua subsequente busca pela justiça, cada passo ao longo do caminho que ela enfrentava intensos obstáculos. Na delegacia, no Primário Centro de Atenção em Saúde e no Judiciário. Leia mais sobre ela aqui.
Congratulamo -nos com todos. ?
Consulte o nosso guia de contribuição.
├── src # Source files
├──asset # assets that belongs commonly in all components.
├──components # Components and their child components.
├──Course # Course component and it's child components
├──index.js
├──styles.scss
├──constants.js
├──CreateCourse #Course realted child component
├──CourseForm
├──index.js
├──styles.scss
├──CourseList
├──redux # all the redux and api related things to Course, we will do under redux directory.
├──action.js # We will define redux actions here
├──api.js # All the course related APIs(axios requests) will happen here
├──reducer.js # All the course related state management will happen here
├──saga.js # All the middlewares for redux state management or api calls we will put here
├──util.js # Mapper functions or any utility function for data manipulation
├──common # All the common components which might be used anywhere in the app.
├──Notification
├──index.js
├──styles.scss
├──Spinner
├──index.js
├──styles.scss
├──pages # root level containers for each page(Individual component wrapper for different url rotue)
├──CourseList # these are basically wrappers, they should't me more than 30-40 lines.
├──index.js
├──styles.scss
├──routing # Creating public and private routes for different pages.
├──services # Tools and utilities for date, time, string and numbmers
├──sass # app color css reference and mixins.
├──docs # Some documentation about code and other things.
├──.env.development # development environment variables.
├──package.json
├──package-lock.json
├── README.md
Por exemplo, temos o diretório de componentes chamados Course . Toda a API, Redux, Redux-Saga e Constant, que estão diretamente relacionados à entidade do curso, entrarão no diretório de componentes Course . Portanto, se alguém trabalha com coisas relacionadas ao curso, queremos que eles sempre fiquem dentro do diretório Course . Basicamente, no estrutura do arquivo abaixo.
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
Nota: As constantes globais serão exibidas no arquivo global src/constant.js .
NOTA: Podemos orientá-lo como usamos o Redux e o Redux-Saga. Entre em contato, podemos lhe dar uma introdução curta ao Redux e Redux-Saga.
saga.js ) da lógica da interface do usuário. Novo no Redux, comece daqui para aprender action.js )reduceer.js )api.js ) [Nota: Não aplicável ao fazer algo com armazenamento local.]saga.js )TODO: Adicione uma imagem visual como as coisas acima interagem entre si.
Você pode pensar nesse fluxo, quando estiver implementando uma chamada de API .:->
Create actions
Create redux state
Create the API function
Create middlewares(saga)
As ações são uma maneira de dizer ao Redux qual estado atualizar sobre qual evento. Basicamente, eles têm uma estrutura, algo como abaixo.?
{ type: 'INCREASE_COUNT', data: 5}
This above object will passed to redux through some function/API(aka Disptacher),
and the intuitive behaviour of this `action` should be that it increments `counter` variable in redux by 5.
Quando fazemos uma chamada de API, geralmente existem três tipos de ações com as quais lidamos.
src/components/componentName/redux/action.js . Vamos dar um exemplo de obtenção de informações do usuário. e como podemos definir ações para obter informações do usuário. as ações devem ser assim.? export const types = {
GET_USER_INTENT: 'GET_USER_INTENT',
GET_USER_INTENT_RESOLVED: 'GET_USER_INTENT_RESOLVED',
GET_USER_INTENT_REJECTED: 'GET_USER_INTENT_REJECTED',
}
export const actions = {
getUser(data) {
return {
type: types.GET_USER_INTENT,
data,
}
},
getUserResolved(data) {
return {
type: types.GET_USER_INTENT_RESOLVED,
data,
}
},
getUserRejected(error) {
return {
type: types.GET_USER_INTENT_REJECTED,
error,
}
},
}
Para coisas relacionadas ao estado (mantendo os dados da API RensPonse e as referências de erro), criamos e gerenciamos o estado em src/components/componentName/redux/reducer.js . O código se parece com isso. ?
import { types } from './action'
const initialState = {
loading: false,
error: false,
data: null,
}
export default (state = initialState, action) => {
switch (action.type) {
case types.GET_USER_INTENT:
return {
...state,
loading: true,
error: false,
data: null,
}
case types.GET_USER_INTENT_RESOLVED:
return {
...state,
loading: false,
error: false,
data: action.data, // mapped user data.
}
case types.GET_USER_INTENT_REJECTED:
return {
...state,
loading: false,
error: action.error, // keeping reference of the error, When API call fails.
data: null,
}
default:
return state
}
}
Para obter dados do servidor, criamos chamadas de API aqui. Principalmente fazemos com a Biblioteca axios . O caminho do arquivo para criar APIs se parece com este src/components/componentName/redux/api.js . A chamada da API se parece com isso. ?
import axios from 'axios'
import { METHODS, HeaderFactory } from '../../../services/api'
/**
* gets user data from the server.
*
* @param {opts}
* @param {object} opts
* @returns {Promise}
*/
export const getUserData = (opts, tokens) => {
return axios({
url: `${process.env.REACT_APP_MERAKI_URL}/users/${opts.userId}`,
method: METHODS.GET,
headers: HeaderFactory(tokens)
})
}
Middlewares são tão úteis, quando falamos sobre como lidar com chamadas de Async/API. Colocamos o Saga Middlewares no arquivo src/components/componentName/redux/saga.js . Torna o manuseio do estado redux fácil e o intutivo. No início, pode parecer um pouco pesado ou longo. Mas depois de criar duas ou três chamadas de API, você pegará um jeito. É assim que lidamos com os dados do usuário através do Middleware Redux Saga.
import { takeLatest, put, call } from 'redux-saga/effects'
import { types, actions } from './action'
import { authorizeRequest, httpStatuses } from '../../../services/auth'
import { getUserData } from './api'
/**
* This handles gets user data from the server
* @param {object} data user information
* @param {object} data.userId user id which will be used to get user information
*/
function* handleGetUserData({ data }) {
const res = yield call(authorizeRequest, getUserData, data)
if(httpStatuses.SUCCESS.includes(res.status)) {
// if the api call was succesful, let's change the status according // to that. also setting `loading` as false.
yield put(actions.getUserResolved(res.data))
} else {
// if the api call wasn't successful, let's set the error in redux /// for refernce.also setting `loading` as false.
yield put(actions.getUserRejected(res))
}
}
export default function* () {
// This action `types.GET_USER_INTENT` is also handled in the redux
// it sets `loading` as true. so we can show some loader when the API call
// is happening.
yield takeLatest(types.GET_USER_INTENT, handleGetUserData)
}
Nota: Em breve, adicionaremos nossa maneira de modelar CSS aqui.
Se você ainda tem alguma dúvida ou sugestão, sobre como as coisas funcionam neste projeto. Sinta -se à vontade para entrar em contato com Vikash, Saquib, Komal ou Abhishek. Estamos mais do que felizes em fazer uma ligação e tornar as coisas mais claras para você. Afinal, você está tentando construir as coisas conosco.
.env.development para começar a executar o projeto localmente e se desenvolver. Por favor, entre em contato conosco. Se você estiver interessado em nos ajudar. No diretório do projeto, você pode executar:
npm start Executa o aplicativo no modo de desenvolvimento.
Abra http: // localhost: 3000 para visualizá -lo no navegador.
A página será recarregada se você fizer edições.
Você também verá erros de fiapos no console.
npm test Inicia o corredor de teste no modo de relógio interativo.
Consulte a seção sobre como executar testes para obter mais informações.
npm run build Construa o aplicativo para produção na pasta build .
Os pacotes corretamente reagem no modo de produção e otimiza a construção para obter o melhor desempenho.
A construção é minificada e os nomes de arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!
Para executar a produção de produção no ambiente local, execute o código após npm run build . [Nota: verifique se você possui toda a variável do ambiente de produção no arquivo .env.production .]
npm install -g serve
serve -s build
Consulte a seção sobre implantação para obter mais informações.
Codificação feliz :)
