bhanwari devi
vamp
Bhanwari Devi est une femme de caste opprimée qui a osé lutter contre les structures féodales, casteistes et patriarcales du Rajasthan rural. Elle a commencé comme travailleuse sociale dans le cadre du projet de développement des femmes géré par le gouvernement. En 1992, elle s'est impliquée dans des campagnes spécifiques contre le mariage des enfants. Elle a conseillé des femmes sur la planification familiale, l'éducation des filles, contre le féticide féminin, la dot et le mariage des enfants. Déjà, à la suite de son activisme, elle et sa famille ont été soumises à des menaces et à l'intimidation constantes des hommes de caste dominants du village.
Une fois, elle est intervenue pour arrêter le mariage d'un enfant de neuf mois d'une famille de castes dominante. Cela a enragé les hommes de caste dominants du village. Malgré les conséquences qui étaient probables, elle a osé continuer à les défier et à défendre ce qui était juste. La même année, dans un acte de représailles, elle a été violée et son mari a battu tout en travaillant sur le terrain.
Dans sa poursuite ultérieure de la justice, chaque pas en cours de route, elle a fait face à des obstacles intenses. Au poste de police, au Primary Health Care Center et au pouvoir judiciaire. En savoir plus sur elle ici.
Nous accueillons tout le monde. ?
Veuillez vous référer à notre guide de contribution.
├── 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
Par exemple, nous avons un répertoire de composants appelé Course . Toutes les API, Redux, Redux-Saga et constantes qui sont directement liées à l'entité de cours ira dans le répertoire des composants Course . Donc, si quelqu'un travaille avec des trucs liés au cours, nous voulons qu'ils restent toujours dans le répertoire Course . Fondamentalement, dans le fichier ci-dessous.
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
Remarque: les constantes mondiales iront dans le fichier global src/constant.js .
Remarque: nous pouvons vous guider à travers la façon dont nous utilisons Redux et Redux-Saga. Veuillez nous contacter, nous pouvons vous donner une courte introduction à Redux et Redux-Saga.
saga.js ) de la logique de l'interface utilisateur. Nouveau sur redux, commencez à partir d'ici pour l'apprendre action.js )reduceer.js )api.js ) [Remarque: Non applicable lorsque vous faites quelque chose avec le stockage local.]saga.js )TODO: Ajoutez une image visuelle comment les choses ci-dessus interagissent entre elles.
Vous pouvez penser à ce flux lorsque vous implémentez un appel API.: ->
Create actions
Create redux state
Create the API function
Create middlewares(saga)
Les actions sont un moyen de dire à Redux quel état mettre à jour sur quel événement. Fondamentalement, ils ont une structure, quelque chose comme ci-dessous.?
{ 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.
Lorsque nous faisons un appel API, il y a généralement trois types d'actions auxquelles nous traitons.
src/components/componentName/redux/action.js . Prenons un exemple d'obtention d'informations utilisateur. et comment nous pouvons définir des actions pour obtenir les informations de l'utilisateur. Les actions devraient ressembler à ceci.? 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,
}
},
}
Pour les choses liées à l'état (conserver les références de données et d'erreur API Rensponse), nous créons et gérons l'état dans src/components/componentName/redux/reducer.js . Le code ressemble à ceci. ?
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
}
}
Pour obtenir des données du serveur, nous créons des appels API ici. Surtout, nous le faisons avec la bibliothèque axios . Le chemin de fichier pour créer des API ressemble à ce src/components/componentName/redux/api.js L'appel de l'API ressemble à ceci. ?
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 est si utile, lorsque nous parlons de la gestion des appels asynchronisés / API. Nous mettons Saga Middlewares dans src/components/componentName/redux/saga.js Il rend la manipulation de Redux State facile et intime. Au début, cela peut sembler un peu lourd ou long. Mais après avoir créé deux ou trois appels d'API, vous aurez un coup. C'est ainsi que nous gérons l'obtention des données utilisateur via Redux Saga Middleware.
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)
}
Remarque: bientôt, nous ajouterons notre façon de styliser CSS ici.
Si vous avez encore un doute ou des suggestions, sur la façon dont les choses fonctionnent dans ce projet. N'hésitez pas à contacter Vikash, Saquib, Komal ou Abhishek. Nous sommes plus qu'heureux de passer un appel et de vous rendre les choses plus claires pour vous. Après tout, vous essayez de construire des choses avec nous.
.env.development pour commencer à exécuter le projet localement et à développer. Veuillez nous contacter. Si vous êtes intéressé à nous aider. Dans le répertoire du projet, vous pouvez courir:
npm start Exécute l'application en mode développement.
Ouvrez http: // localhost: 3000 pour le voir dans le navigateur.
La page se rechargera si vous effectuez des modifications.
Vous verrez également toutes les erreurs de peluche dans la console.
npm test Lance le coureur de test en mode de montre interactif.
Voir la section concernant l'exécution des tests pour plus d'informations.
npm run build Créez l'application pour la production dans le dossier build .
Il réagit correctement en mode de production et optimise la construction pour les meilleures performances.
La construction est minifiée et les noms de fichiers incluent les hachages.
Votre application est prête à être déployée!
Pour exécuter la construction de production dans l'environnement local, veuillez exécuter le code suivant après npm run build . [Remarque: assurez-vous que vous avez toute la variable d'environnement de production dans le fichier .env.production .]
npm install -g serve
serve -s build
Voir la section sur le déploiement pour plus d'informations.
Codage heureux :)
