bhanwari devi
vamp
バンワリ・デヴィは、ラジャスタン州の田舎の封建的、カースト、家父長の構造と戦うことを敢えてした抑圧された女性です。彼女は、政府が運営する女性開発プロジェクトの一部としてソーシャルワーカーとしてスタートしました。 1992年、彼女は児童婚に対する特定のキャンペーンに関与するようになりました。彼女は、女性の児童教育、女性の児童教育、持参金、児童結婚に対して、家族計画、女子児童教育について女性にカウンセリングしました。すでに、彼女の行動主義の結果として、彼女と彼女の家族は、村の支配的なカーストの男性による絶え間ない脅威と脅迫にさらされていました。
彼女が介入して、支配的なカースト家から生後9ヶ月の幼児との結婚を止めました。これは、村の支配的なカーストの男性を激怒させました。可能性のある結果を知っているにもかかわらず、彼女はあえてそれらを無視し続け、正しいことを支持しました。同じ年、報復行為で、彼女は輪姦され、彼女の夫はフィールドで働いている間に打ち上げられました。
正義のためのその後の追求において、彼女は激しいハードルに直面したすべてのステップに沿っていた。警察署、プライマリヘルスケアセンター、司法士。彼女の詳細はこちらをご覧ください。
皆さんを歓迎します。 ？
貢献ガイドを参照してください。
├── 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 ）とのAPI呼び出し[注：ローカルストレージで何かをする場合は該当しません。]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呼び出しを行うと、通常、3つの種類のアクションがあります。
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ライブラリを使用しています。 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呼び出しの処理について話すとき、MiddleWaresはとても便利です。 SAGA Middlewaresをsrc/components/componentName/redux/saga.jsファイルに入れます。 Reduxの状態を簡単かつ無関心にすることができます。まず、少し面倒に見えるか、長く見えるかもしれません。ただし、2つまたは3つの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
詳細については、展開に関するセクションを参照してください。
ハッピーコーディング:)
