bhanwari devi
vamp
Бханвари Деви-угнетенная каста женщина, которая осмелилась бороться с феодальными, кастеистскими и патриархальными структурами сельской местности Раджастхана. Она начинала как социальная работница в рамках правительственного проекта развития женщин. В 1992 году она стала участвовать в конкретных кампаниях против детских браков. Она консультировала женщин по планированию семьи, обучении девочек, против женского фетитида, приданого и детских браков. Уже, в результате ее активности, она и ее семья подвергались постоянным угрозам и запугиванию доминирующими кастовыми людьми в деревне.
Как только она вмешалась, чтобы остановить брак девятимесячного младенца из доминирующей семьи. Это разозлило доминирующих кастовых мужчин в деревне. Несмотря на то, что, вероятно, знала последствия, она осмелилась продолжать бросить им вызов и отстаивать то, что было правильно. В том же году, в результате возмездия, она была изнасилована, и ее муж избил во время работы на поле.
В своем последующем стремлении к справедливости каждый шаг по пути она сталкивалась с сильными препятствиями. В полицейском участке, в Центре первичной медицинской помощи и судебной власти. Узнайте больше о ней здесь.
Мы приветствуем всех. ?
Пожалуйста, обратитесь к нашему руководству по взносу.
├── 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
ПРИМЕЧАНИЕ. Глобальные константы пойдут в глобальный файл src/constant.js .
Примечание: мы можем пройти через то, как мы используем Redux и Redux-Saga. Пожалуйста, свяжитесь с нами, мы можем дать вам короткое вступление в Redux и Redux-Saga.
saga.js ) вдали от логики пользовательского интерфейса. Новичок в 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 Data и ошибок) мы создаем и управляем состоянием в 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 . Путь файла для создания 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)
})
}
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 здесь.
Если у вас все еще есть некоторые сомнения или предложения, о том, как все работает в этом проекте. Пожалуйста, не стесняйтесь обращаться в Викаш, Саквиб, Комал или Абхишек. Мы более чем рады позвонить и прояснить вам все более ясные. В конце концов, вы пытаетесь построить с нами.
.env.development Пожалуйста, свяжитесь с нами. Если вы заинтересованы в том, чтобы помочь нам. В каталоге проекта вы можете запустить:
npm start Запускает приложение в режиме разработки.
Откройте http: // localhost: 3000, чтобы просмотреть его в браузере.
Страница будет перезагружаться, если вы сделаете изменения.
Вы также увидите любые ошибки ворса в консоли.
npm test Запускает Test Runner в режиме интерактивных часов.
См. Раздел о запуске тестов для получения дополнительной информации.
npm run build Создает приложение для производства в папку build .
Он правильно реагирует в производственном режиме и оптимизирует сборку для наилучшей производительности.
Сборка занижена, а имена файлов включают хэши.
Ваше приложение готово к развертыванию!
Чтобы запустить производственную сборку в локальной среде, запустите после кода после npm run build . [Примечание: убедитесь, что у вас есть все переменная производственной среды в файле .env.production .]
npm install -g serve
serve -s build
См. Раздел о развертывании для получения дополнительной информации.
Счастливого кодирования :)
