bhanwari devi
vamp
Bhanwari Devi adalah seorang wanita kasta yang ditindas yang berani melawan struktur feodal, kasta dan patriarki pedesaan Rajasthan. Dia mulai sebagai pekerja sosial sebagai bagian dari proyek pembangunan wanita yang dikelola pemerintah. Pada tahun 1992, ia terlibat dalam kampanye spesifik melawan pernikahan anak. Dia menasihati wanita tentang keluarga berencana, pendidikan anak perempuan, melawan feticide perempuan, mas kawin, dan pernikahan anak. Sudah, sebagai akibat dari aktivisme, dia dan keluarganya mengalami ancaman terus -menerus dan intimidasi oleh orang -orang kasta dominan di desa.
Begitu dia turun tangan untuk menghentikan pernikahan bayi berusia sembilan bulan dari keluarga kasta yang dominan. Ini membuat marah orang -orang kasta dominan di desa. Meskipun mengetahui konsekuensi yang mungkin terjadi, dia berani terus menentang mereka dan membela apa yang benar. Pada tahun yang sama, dalam tindakan pembalasan, dia diperkosa geng dan suaminya dipukuli saat bekerja di lapangan.
Dalam pengejaran keadilan berikutnya, setiap langkah di sepanjang jalan dia menghadapi rintangan yang intens. Di kantor polisi, di pusat perawatan kesehatan primer, dan peradilan. Baca lebih lanjut tentang dia di sini.
Kami menyambut semuanya. ?
Silakan merujuk ke Panduan Kontribusi kami.
├── 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
Misalnya, kami memiliki direktori komponen yang disebut Course . Semua API, Redux, Redux-Saga, dan konstan yang secara langsung terkait dengan entitas kursus akan masuk ke dalam direktori komponen Course . Jadi jika ada yang bekerja dengan hal -hal yang terkait dengan kursus, kami ingin mereka selalu tinggal di dalam direktori Course . Pada dasarnya dalam strucuture file di bawah ini.
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
Catatan: Konstanta global akan masuk dalam file global src/constant.js .
Catatan: Kami dapat memandu Anda melalui cara kami menggunakan Redux dan Redux-Saga. Harap hubungi, kami dapat memberi Anda intro pendek untuk Redux dan Redux-Saga.
saga.js ) dari logika UI. Baru di Redux, mulailah dari sini untuk mempelajarinya action.js )reduceer.js )api.js ) [Catatan: Tidak berlaku saat melakukan sesuatu dengan penyimpanan lokal.]saga.js )TODO: Tambahkan gambar visual bagaimana hal -hal di atas saling berinteraksi.
Anda dapat memikirkan aliran ini, saat Anda menerapkan panggilan API .:->
Create actions
Create redux state
Create the API function
Create middlewares(saga)
Tindakan adalah cara untuk memberi tahu redux apa yang akan diperbarui pada acara apa. Pada dasarnya mereka memiliki struktur, sesuatu seperti di bawah ini.?
{ 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.
Ketika kita melakukan panggilan API, umumnya ada tiga jenis tindakan yang kita tangani.
src/components/componentName/redux/action.js ini. Mari kita ambil contoh mendapatkan informasi pengguna. dan bagaimana kami dapat mendefinisikan tindakan untuk mendapatkan informasi pengguna. Tindakan harus terlihat seperti ini.? 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,
}
},
}
Untuk hal -hal yang terkait dengan keadaan (menjaga data dan referensi data rensponse API), kami membuat dan mengelola status di src/components/componentName/redux/reducer.js . Kode terlihat seperti ini. ?
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
}
}
Untuk mendapatkan data dari server, kami membuat panggilan API di sini. Sebagian besar kita lakukan dengan perpustakaan axios . Jalur file untuk membuat API terlihat seperti src/components/componentName/redux/api.js ini. Panggilan API terlihat seperti ini. ?
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 sangat berguna, ketika kita berbicara tentang menangani panggilan async/API. Kami menempatkan Saga Middlewares di file src/components/componentName/redux/saga.js . Itu membuat penanganan redux state mudah dan intutif. Mulai mungkin terlihat agak rumit atau panjang. Tetapi setelah membuat dua atau tiga panggilan API, Anda akan menguasainya. Beginilah cara kami menangani mendapatkan data pengguna melalui 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)
}
Catatan: Segera, kami akan menambahkan cara menata CSS di sini.
Jika Anda masih memiliki beberapa keraguan atau saran, tentang bagaimana hal -hal bekerja dalam proyek ini. Silakan menghubungi Vikash, Saquib, Komal atau Abhishek. Kami sangat senang bisa menelepon dan membuat segalanya lebih jelas bagi Anda. Lagipula, Anda mencoba membangun sesuatu dengan kami.
.env.development untuk mulai menjalankan proyek secara lokal dan berkembang. Tolong hubungi kami. Jika Anda tertarik untuk membantu kami. Di direktori proyek, Anda dapat menjalankan:
npm start Menjalankan aplikasi dalam mode pengembangan.
Buka http: // localhost: 3000 untuk melihatnya di browser.
Halaman ini akan memuat ulang jika Anda mengedit.
Anda juga akan melihat kesalahan serat di konsol.
npm test Meluncurkan test runner dalam mode jam tangan interaktif.
Lihat bagian tentang menjalankan tes untuk informasi lebih lanjut.
npm run build Membangun aplikasi untuk produksi ke folder build .
Bundelnya dengan benar bereaksi dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.
Bangunan diminifikasi dan nama file termasuk hash.
Aplikasi Anda siap digunakan!
Untuk menjalankan build produksi di lingkungan lokal, silakan jalankan kode berikut setelah npm run build . [Catatan: Pastikan Anda memiliki semua variabel lingkungan produksi di file .env.production .]
npm install -g serve
serve -s build
Lihat bagian tentang penyebaran untuk informasi lebih lanjut.
Selamat mengkode :)
