bhanwari devi
vamp
Bhanwari Devi ist eine unterdrückte Frau, die es wagte, gegen die feudalen, kasteistischen und patriarchalischen Strukturen des ländlichen Rajasthan zu kämpfen. Sie begann als Sozialarbeiterin als Teil des von der Regierung geführten Frauenentwicklungsprojekts. 1992 engagierte sie sich in spezifische Kampagnen gegen Kinderheirat. Sie beriet Frauen in der Familienplanung, der Bildung von Mädchen, der Bildung von Mädchen, gegen Fetikerinnen, Mitgift und Kinderheirat. Infolge ihres Aktivismus waren sie und ihre Familie bereits von den dominanten Kastenmännern im Dorf ständigen Drohungen und Einschüchterungen ausgesetzt.
Einmal intervenierte sie, um die Ehe eines neun Monate alten Kindes aus einer dominanten Kaste-Familie zu stoppen. Dies verärgerte die dominierenden Kastenmänner im Dorf. Obwohl sie die wahrscheinlich waren, die wahrscheinlich waren, wagte sie es, sie weiter zu trotzen und für das zu stehen, was richtig war. Im selben Jahr, in einem Akt der Vergeltung, wurde sie mit einer Banden verurteilt und ihr Mann verprügelte, während sie auf dem Feld arbeitete.
In ihrem anschließenden Streben nach Gerechtigkeit trat jeder Schritt auf dem Weg intensive Hürden aus. Auf der Polizeistation, im primären Gesundheitszentrum und in der Justiz. Lesen Sie hier mehr über sie.
Wir begrüßen alle. ?
Weitere Informationen finden Sie in unserem Beitragsführer.
├── 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
Zum Beispiel haben wir ein Komponentenverzeichnis namens Course . Alle API, Redux, Redux-Saga und Konstante, die in direktem Zusammenhang mit der Kursentität stehen, werden das Verzeichnis der Kurskomponenten in Course Kurskomponenten eingehen. Wenn also jemand mit kursbezogenen Sachen arbeitet, möchten wir, dass sie immer im Course bleiben. Grundsätzlich in der unten stehenden Dateistruktur.
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
Hinweis: Globale Konstanten werden in der globalen src/constant.js -Datei eingehen.
Hinweis: Wir können Sie durch die Verwendung von Redux und Redux-Saga führen. Bitte setzen Sie sich in Verbindung, wir können Ihnen ein kurzes Intro für Redux und Redux-Saga geben.
saga.js ) von der UI-Logik weg. Neu in Redux, beginnen Sie von hier, um es zu lernen action.js )reduceer.js )api.js ) [Hinweis: Nicht anwendbar, wenn Sie etwas mit lokalem Speicher machen.]saga.js )TODO: Fügen Sie ein visuelles Bild hinzu, wie die oben genannten Dinge miteinander interagieren.
Sie können sich diesen Fluss vorstellen, wenn Sie einen API-Anruf implementieren .:->
Create actions
Create redux state
Create the API function
Create middlewares(saga)
Aktionen sind eine Möglichkeit, Redux zu sagen, welcher Status über welches Ereignis aktualisiert werden soll. Grundsätzlich haben sie eine Struktur, so etwas wie unten.
{ 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.
Wenn wir einen API -Anruf durchführen, gibt es im Allgemeinen drei Arten von Aktionen, mit denen wir uns befassen.
src/components/componentName/redux/action.js -Datei. Nehmen wir ein Beispiel für Benutzerinformationen. und wie wir Aktionen definieren können, um Benutzerinformationen zu erhalten. Die Handlungen sollten so aussehen. 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,
}
},
}
Für staatlich verwandte Dinge (beibehalten von API -RenPonse -Daten und -fehlerreferenzen) erstellen und verwalten wir Status in src/components/componentName/redux/reducer.js . Der Code sieht so aus. ?
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
}
}
Um Daten vom Server abzurufen, erstellen wir hier API -Anrufe. Meistens machen wir mit axios Library. Der Dateipfad zum Erstellen von APIs sieht aus wie diese src/components/componentName/redux/api.js . Der API -Anruf sieht so aus. ?
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 sind so nützlich, wenn wir über die Behandlung von Async/API -Aufrufen sprechen. Wir setzen Saga Middlewares in src/components/componentName/redux/saga.js -Datei ein. Es macht den Umgang mit Redux State einfach und intutiv. Zu Beginn könnte es etwas umständlich oder lang aussehen. Aber nachdem Sie zwei oder drei API -Anrufe erstellt haben, erhalten Sie einen Dreh raus. Auf diese Weise können wir mit Benutzerdaten über Redux -Saga Middleware abrufen.
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)
}
Hinweis: Bald werden wir hier unsere Art zum Styling CSS hinzufügen.
Wenn Sie noch Zweifel oder Vorschläge haben, wie die Dinge in diesem Projekt funktionieren. Bitte wenden Sie sich an Vikash, Saquib, Komal oder Abhishek. Wir freuen uns, einen Anruf zu erhalten und Ihnen die Dinge klarer zu machen. Schließlich versuchen Sie, Dinge mit uns aufzubauen.
.env.development , um das Projekt lokal durchzuführen und sich zu entwickeln. Bitte setzen Sie sich mit uns in Verbindung. Wenn Sie uns helfen möchten. Im Projektverzeichnis können Sie ausführen:
npm start Führt die App im Entwicklungsmodus aus.
Öffnen Sie http: // localhost: 3000, um es im Browser anzuzeigen.
Die Seite wird neu laden, wenn Sie Änderungen vornehmen.
Sie werden auch Fellfehler in der Konsole sehen.
npm test Startet den Testläufer im interaktiven Uhrenmodus.
Weitere Informationen finden Sie im Abschnitt zum Ausführen von Tests.
npm run build Build die App für die Produktion im build -Ordner.
Es reagiert korrekt im Produktionsmodus und optimiert den Build für die beste Leistung.
Der Build wird abgebaut und die Dateinamen enthalten die Hashes.
Ihre App ist bereit für die Bereitstellung!
Um die Produktion in der lokalen Umgebung auszuführen, führen Sie bitte den Code nach npm run build aus. [Hinweis: Stellen Sie sicher, dass Sie die gesamte Produktionsumgebungsvariable in .env.production -Datei haben.]
npm install -g serve
serve -s build
Weitere Informationen finden Sie im Abschnitt zur Bereitstellung.
Happy Coding :)
