bhanwari devi
vamp
Bhanwari Devi เป็นผู้หญิงวรรณะที่ถูกกดขี่ซึ่งกล้าที่จะต่อสู้กับโครงสร้างศักดินานักวรรณะและปรมาจารย์ของรัฐราชสถานในชนบท เธอเริ่มเป็นนักสังคมสงเคราะห์ซึ่งเป็นส่วนหนึ่งของโครงการพัฒนาสตรีที่ดำเนินการโดยรัฐบาล ในปี 1992 เธอมีส่วนร่วมในการรณรงค์เฉพาะกับการแต่งงานของเด็ก เธอให้คำปรึกษากับผู้หญิงเกี่ยวกับการวางแผนครอบครัวการศึกษาเด็กสาวกับ feticide หญิงสินสอดทองหมั้นและการแต่งงานของเด็ก จากการเคลื่อนไหวของเธอเธอและครอบครัวของเธอถูกคุกคามอย่างต่อเนื่องและข่มขู่โดยชายวรรณะที่โดดเด่นในหมู่บ้าน
เมื่อเธอเข้าแทรกแซงเพื่อหยุดการแต่งงานของทารกอายุเก้าเดือนจากตระกูลวรรณะที่โดดเด่น สิ่งนี้ทำให้ชายวรรณะที่โดดเด่นในหมู่บ้าน แม้จะรู้ถึงผลที่ตามมา แต่เธอก็กล้าที่จะท้าทายพวกเขาต่อไปและยืนหยัดเพื่อสิ่งที่ถูกต้อง ในปีเดียวกันในการตอบโต้เธอถูกข่มขืนและสามีของเธอทุบตีขณะทำงานในสนาม
ในการแสวงหาความยุติธรรมที่ตามมาของเธอทุกขั้นตอนตามวิธีที่เธอเผชิญกับอุปสรรคที่รุนแรง ที่สถานีตำรวจที่ศูนย์ดูแลสุขภาพเบื้องต้นและตุลาการ อ่านเพิ่มเติมเกี่ยวกับเธอที่นี่
เรายินดีต้อนรับทุกคน -
โปรดดูคู่มือการบริจาคของเรา
├── 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
ตัวอย่างเช่นเรามีไดเรกทอรีส่วนประกอบที่เรียกว่า Course API, Redux, Redux-Saga และค่าคงที่ทั้งหมดซึ่งเกี่ยวข้องโดยตรงกับเอนทิตีหลักสูตรจะเข้าไปในไดเรกทอรีส่วนประกอบ Course ดังนั้นหากใครทำงานกับสิ่งที่เกี่ยวข้องกับหลักสูตรเราต้องการให้พวกเขาอยู่ในไดเรกทอรี Course เสมอ โดยทั่วไปในรูปแบบของไฟล์ด้านล่าง
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
หมายเหตุ: ค่าคงที่ทั่วโลกจะไปในไฟล์ src/constant.js ทั่วโลก
หมายเหตุ: เราสามารถแนะนำคุณผ่านวิธีที่เราใช้ redux และ redux-saga โปรดติดต่อเราสามารถให้คำแนะนำสั้น ๆ กับ Redux และ Redux-Saga
saga.js ) ออกไปจากตรรกะ UI ใหม่สำหรับ Redux เริ่มจากที่นี่เพื่อเรียนรู้ action.js )reduceer.js )api.js ) [หมายเหตุ: ไม่สามารถใช้งานได้เมื่อทำอะไรกับที่เก็บข้อมูลในท้องถิ่น]saga.js )TODO: เพิ่มภาพที่มองเห็นว่าสิ่งต่าง ๆ มีปฏิสัมพันธ์กันอย่างไร
คุณสามารถนึกถึงโฟลว์นี้เมื่อคุณใช้การโทร API:->
Create actions
Create redux state
Create the API function
Create middlewares(saga)
การกระทำเป็นวิธีที่จะบอก Redux ว่าสถานะใดที่จะอัปเดตเกี่ยวกับเหตุการณ์ใด โดยพื้นฐานแล้วพวกเขามีโครงสร้างบางอย่างด้านล่าง?
{ 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.
เมื่อเราทำการโทร API โดยทั่วไปจะมีการกระทำสามแบบที่เราจัดการ
src/components/componentName/redux/action.js มาเป็นตัวอย่างของการรับข้อมูลผู้ใช้ และวิธีที่เราสามารถกำหนดการกระทำเพื่อรับข้อมูลของผู้ใช้ การกระทำควรมีลักษณะเช่นนี้? 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,
}
},
}
สำหรับสิ่งที่เกี่ยวข้องกับรัฐ (การรักษาข้อมูล API rensponse และการอ้างอิงข้อผิดพลาด) เราสร้างและจัดการสถานะใน src/components/componentName/redux/reducer.js รหัสมีลักษณะเช่นนี้ -
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
}
}
เพื่อรับข้อมูลจากเซิร์ฟเวอร์เราสร้างการโทร API ที่นี่ ส่วนใหญ่เราทำกับ axios Library พา ธ ไฟล์เพื่อสร้าง APIs ดูเหมือนว่า src/components/componentName/redux/api.js นี้ การโทร API มีลักษณะเช่นนี้ -
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 มีประโยชน์มากเมื่อเราพูดถึงการจัดการการโทร Async/API เราใส่ Saga Middlewares ในไฟล์ src/components/componentName/redux/saga.js มันทำให้การจัดการ Redux State เป็นเรื่องง่ายและเป็นไปได้ ในการเริ่มต้นมันอาจดูยุ่งยากหรือยาวเล็กน้อย แต่หลังจากสร้างการโทร API สองหรือสามครั้งคุณจะได้รับมัน นี่คือวิธีที่เราจัดการกับการรับข้อมูลผู้ใช้ผ่านมิดเดิลแวร์ 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)
}
หมายเหตุ: เร็ว ๆ นี้เราจะเพิ่มวิธีการจัดแต่งทรงผม CSS ที่นี่
หากคุณยังมีข้อสงสัยหรือข้อเสนอแนะเกี่ยวกับวิธีการทำงานในโครงการนี้ โปรดติดต่อ Vikash, Saquib, Komal หรือ Abhishek เรามีความสุขมากกว่าที่จะได้รับสายและทำให้คุณชัดเจนยิ่งขึ้น หลังจากนั้นคุณกำลังพยายามสร้างสิ่งต่าง ๆ กับเรา
.env.development เพื่อเริ่มใช้งานโครงการในพื้นที่และพัฒนา กรุณาติดต่อเรา หากคุณสนใจที่จะช่วยเหลือเรา ในไดเรกทอรีโครงการคุณสามารถเรียกใช้:
npm start รันแอพในโหมดการพัฒนา
เปิด http: // localhost: 3000 เพื่อดูในเบราว์เซอร์
หน้าจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดผ้าสำลีในคอนโซล
npm test เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูหัวข้อเกี่ยวกับการเรียกใช้การทดสอบสำหรับข้อมูลเพิ่มเติม
npm run build สร้างแอพสำหรับการผลิตไปยังโฟลเดอร์ build
มันรวมกันอย่างถูกต้องตอบสนองในโหมดการผลิตและปรับการสร้างเพื่อประสิทธิภาพที่ดีที่สุด
บิลด์มีขนาดเล็กและชื่อไฟล์รวมถึงแฮช
แอพของคุณพร้อมที่จะนำไปใช้งานแล้ว!
ในการเรียกใช้การสร้างการผลิตในสภาพแวดล้อมท้องถิ่นโปรดเรียกใช้รหัสต่อไปนี้หลังจาก npm run build [หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณมีตัวแปรสภาพแวดล้อมการผลิตทั้งหมดในไฟล์. .env.production ]
npm install -g serve
serve -s build
ดูหัวข้อเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม
การเข้ารหัสมีความสุข :)
