bhanwari devi
vamp
Bhanwari Devi는 Rajasthan 시골의 봉건, 카스트리스트 및 가부장적 구조와 싸우기 위해 감히 압제 된 카스트 여성입니다. 그녀는 정부가 운영하는 여성 개발 프로젝트의 일환으로 사회 복지사로 시작했습니다. 1992 년, 그녀는 아동 결혼에 대한 특정 캠페인에 참여하게되었습니다. 그녀는 가족 계획, 소녀 아동 교육, 여성 페티 라이드, 지참금 및 아동 결혼에 대해 여성에게 상담했습니다. 이미 그녀의 행동주의의 결과로, 그녀와 그녀의 가족은 마을의 지배적 인 카스트 사람들에 의해 끊임없는 위협과 협박을 받았습니다.
일단 그녀가 지배적 인 카스트 가족으로부터 9 개월 된 유아의 결혼을 막기 위해 개입했다. 이것은 마을의 지배적 인 카스트 사람들을 분노하게했다. 가능성이 높은 결과를 알고 있었음에도 불구하고, 그녀는 감히 그들을 계속 무시하고 옳은 것을지지했습니다. 같은 해, 보복 행위에서, 그녀는 현장에서 일하는 동안 갱 랩을했고 남편이 때렸습니다.
그녀의 정의를 추구하면서, 그녀는 강렬한 장애물에 직면 한 길을 따라 모든 단계를 밟았습니다. 경찰서, 1 차 의료 센터 및 사법부. 그녀에 대해 자세히 알아보십시오.
우리는 모두를 환영합니다. ?
기여 가이드를 참조하십시오.
├── 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 및 Constant는 Course 구성 요소 디렉토리 내부로 이동합니다. 따라서 누군가가 코스 관련 작업을 수행하면 항상 Course 디렉토리에 머무르기를 원합니다. 기본적으로 아래 파일 스트루큐어에서.
├──components
├──Course
├──index.js
├──styles.scss
├──constants.js
├──ChildComponent
├──CourseList
├──redux
├──action.js
├──api.js
├──reducer.js
├──saga.js
├──util.js
├──AnotherChildComponent
참고 : 글로벌 상수는 Global 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와 함께합니다. API를 생성하는 파일 경로는이 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)
})
}
중간 전위는 Async/API 통화 처리에 대해 이야기 할 때 매우 유용합니다. SAGA MiddleWares를 src/components/componentName/redux/saga.js 파일에 넣습니다. Redux 상태를 쉽고 직관적으로 처리합니다. 처음에는 약간 번거 롭거나 길게 보일 수 있습니다. 그러나 2 ~ 3 개의 API 호출을 만든 후에는 그 점이 있습니다. 이것은 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)
}
참고 : 곧 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
자세한 내용은 배포에 대한 섹션을 참조하십시오.
행복한 코딩 :)
