反応を記述する技術(反応ライブラリを理解する)
冗長性:最も一般的なレスポンスステータス管理ライブラリコンポーネントの状態更新ロジックを別のファイルに分離し、 をより効率的に管理する.コンポーネント間で同じ状態を共有する場合、複数のコンポーネントを必要とすることなく、状態値 を容易に伝達または更新することができる.グローバル状態を管理するときに非常に有効な ステータスをより系統的に管理(プロジェクトの規模が大きい場合はより良い) コードを維持し、生産性を最大限に向上させる は便利な開発者ツールサポートとミドルウェア機能を提供し、非同期タスク を効率的に管理することができる.
実習プロセスキー Parcel構成 スイッチとカウンタを切り替える を実施する.
16-1. コンセプトアレンジ
フォーマット にはtypeフィールドが必要です.アクション映画の名前だと考えればいい その他の値は、以降の状態更新時に を参照する.例
アクション作成関数(action creator):アクションオブジェクトを作成する関数
reducer(reducer):変化関数アクションを作成して起動すると、現在の状態と入力されたアクションオブジェクトがパラメータとして使用されます.
2つの値 を参照して新しい状態を作成し、 を返します.
けいじょう
ストア(Store):プロジェクトへのコピーの適用のみ 1 1つのプロジェクトには1つの店しかありません ストアには、現在のアプリケーションのステータスとリダイレクトが含まれています.また、いくつかの重要な組み込み関数があります.
派遣:ショップの組み込み関数は「トリガ動作」と理解すれば である.
動作オブジェクトをパラメータとして dispatch(action)と同様に呼び出す .が呼び出された後、StoconDeduser関数を実行することによって、新しいステータス が作成される.
サブスクリプション(Subscribe):ショップの組み込み関数 subscribe関数でリスナー関数がパラメータ形式で呼び出されると、そのリスナー関数が動作のディスパッチにより状態が更新されるたびに が呼び出される.
例16-2. 無反応
reducer関数は、以前の状態と動作オブジェクトをパラメータとして受け入れます. パラメータ以外の値に依存することはできません. 以前の状態は絶対に触られず、新しい状態オブジェクトが作成され、返されます. と同じパラメータを呼び出すreducer関数は、常に同じ結果値を返さなければなりません. 以上の4種類の麝香に注意してください.
実習プロセス
16-1. コンセプトアレンジ
16-1-1. アクション
アクション:ステータスを変更する必要がある場合に発生します.オブジェクトとして表示
{
type: 'TOGGLE_VALUE'
}{
type: 'ADD_TODO',
data: {
id: 1,
text: '리덕스 배우기'
}
}
{
type: 'CHANGE_INPUT',
text: '안녕하세요'
}16-1-2. アクション作成関数
アクション作成関数(action creator):アクションオブジェクトを作成する関数
function addTodo(data) {
return {
type: 'ADD_TODO',
data
}
}
// 화살표 함수
const changeInput = (text) => {
type: 'CHANGE_INPUT',
text
}16-1-3. さいせいき
reducer(reducer):変化関数
2つの値
けいじょう
const initialState = {
counter: 1
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1
};
default:
return state;
}
}16-1-4. ストア
ストア(Store):プロジェクトへのコピーの適用のみ
16-1-5. 派遣する
派遣:ショップの組み込み関数
動作オブジェクトをパラメータとして
16-1-6. 購読する
サブスクリプション(Subscribe):ショップの組み込み関数
例
const listener = () => {
console.log('상태가 업데이트 됨')
}
const unsubscribe = store.subscribe(listener)
unsubscribe() // 추후 구독을 비활성화할 때 함수를 호출16-2. 無反応
reduceは応答に属するライブラリではありません.Reactionで使用するために作成されていますが、実際には他のUIライブラリ/フレームワークとともに使用できます.reduceはバニラjavascriptとともに使用でき、バニラjavascript自体はライブラリやフレームワークのない純粋なjavascriptです.
reduceのコア機能と動作原理を理解するために、バニラJavaScript環境でreduceを使用します.
16-2-1. Parcelを使用したプロジェクトの作成
Webアプリケーションプロジェクトを簡単に整理できるParcelというツールを使用して、プロジェクトを整理します.yarn global add parcel-bundler
yarn global이 설치되지 않는다면 npm install -g parcel-bundler를 하면 된다고 한다.
package.jsonファイルの作成mkdir vanilla-redux
cd vanilla-redux
yarn init -y
このフォルダにindexを作成します.html<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
</head>
<body>
<div>바닐라 자바스크립트</div>
<script src="./index.js"></script>
</body>
</html>
index.jsconsole.log("hello parcel");
作成後の端末parcel index.html
コマンドを実行すると、サーバは開発のために実行されます.
住所が出てきました.このアドレスに入ると.
Ridexモジュールをインストールします.yarn add redux
16-2-2. 簡単なUI構成
index.css.toggle {
border: 2px solid #333;
width: 64px;
height: 64px;
border-radius: 32px;
box-sizing: border-box;
}
.toggle.active {
background: yellow;
}
index.htmlの変更<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="toggle"></div>
<hr />
<h1>0</h1>
<button id="increase">+1</button>
<button id="decrease">-1</button>
<script src="./index.js"></script>
</body>
</html>
16-2-3. DOMリファレンスの作成
ファイルの上部で変更するDOMノードを指す値を事前に宣言します.const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
16-2-4. アクションタイプと生成関数の定義
アクション:アイテムの状態を変更する
まず、アクションの名前を定義します.動作の名前は文字列形式で、主に大文字で記入し、動作の名前は一意でなければならない.繰り返すと思わぬ結果になるからです.const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
このアクション名を使用して、アクションオブジェクトを作成するアクション生成関数を作成します.アクションオブジェクトにはtype値が必要です.後で通常の更新を行うときに、参照したい値を任意に追加できます.const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference = { type: INCREASE, defference });
const decrease = () => ({ type: DECREASE });
16-2-5. 初期値の設定
初期値がフリーの形式で定義されます.const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference = { type: INCREASE, defference });
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};
16-2-6. Reduser関数の定義
変化を引き起こすreducer関数を使用します.関数のパラメータはstate,action値です.const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference) => ({
type: INCREASE,
defference,
});
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};
// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
// action.type에 따라 다른 작업을 처리
switch (action.type) {
case TOGGLE_SWITCH:
return {
...state, // 불변성 유지
toggle: !state.toggle,
};
case INCREASE:
return {
...state,
counter: state.counter + action.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}
reducer関数を最初に呼び出すとstate値は定義されません.この値がundefinedとして指定されると、関数のパラメータ側にデフォルト値が設定され、initialstateがデフォルト値に設定されます.
reducerでは、状態の不変性を維持し、データを変化させる必要がありますが、この操作を行う場合はspread演算子を使用すると便利です.しかし、オブジェクト構造が複雑になると(object.something.intral.valueなど)、拡張演算子で不変性を管理したり更新したりするのは難しく、コードの毒性も悪い.そのため、リドスの状態はできるだけ深く入らない構造で行うのが望ましい.
オブジェクト構造が複雑であるか、配列が同時に関連している場合は、immerライブラリを使用してリーダを簡単に記述できます.
16-2-7. ショップの作成
ショップの作成時にcreateStore関数を使用します.この関数を使用するには、コードの上部にimport文を追加し、reduceから関数を読み込み、関数のパラメータにreducer関数を追加する必要があります.import { createStore } from "redux";
const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference) => ({
type: INCREASE,
defference,
});
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};
// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
// action.type에 따라 다른 작업을 처리
switch (action.type) {
case TOGGLE_SWITCH:
return {
...state, // 불변성 유지
toggle: !state.toggle,
};
case INCREASE:
return {
...state,
counter: state.counter + action.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}
const store = createStore(reducer);
16-2-8. render関数の作成
render関数:ステータスが更新されるたびに呼び出されます.レスポンスのrender関数とは異なり、htmlを使用して作成したUIのプロパティはステータスに応じて変更されます.const store = createStore(reducer);
const render = () => {
const state = store.getState(); // 현재 상태를 불러옴
// 토글 처리
if (state.toggle) {
divToggle.classList.add("active");
} else {
divToggle.classList.remove("active");
}
// 카운터 처리
counter.innerText = state.counter;
};
render();
16-2-9. 購読する
ショップのステータスが変更されるたびにrender関数が呼び出され、この操作はショップ内蔵関数subscribeを使用して実行されます.subscribe関数のパラメータは関数形式の値を伝達する.このように渡された関数は後で動作し,ステータスが更新されるたびに呼び出される.プロジェクトはsubscribe関数を直接使用し、反応プロジェクトでreduceを使用する場合は直接使用しません.これは、コンポーネントで冗長状態をクエリーすると、react-reduxというライブラリが代わりに存在するためです.const render = () => {
const state = store.getState(); // 현재 상태를 불러옴
// 토글 처리
if (state.toggle) {
divToggle.classList.add("active");
} else {
divToggle.classList.remove("active");
}
// 카운터 처리
counter.innerText = state.counter;
};
render();
store.subscribe(render);
16-2-10. エキサイティングアクション
Dispatchを使用して動作を生成します.dispatchは、ショップ内蔵関数dispatchを使用します.パラメータはアクションオブジェクトを入れるだけです.
DOM要素をクリックすると、Bentlerに設定されます.イベント関数の内部では、dispatch関数を使用してstoに動作を渡します.render();
store.subscribe(render);
// 액션 발생 시키기
divToggle.onclick = () => {
store.dispatch(toggleSwitch());
};
btnIncrease.onclick = () => {
store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
store.dispatch(decrease());
};
16-3. リデスの3つのルール
16-3-1. 単一ショップ
1つのアプリケーションにショップがあります.実際、複数のショップを使うことは不可能ではありません.一部の更新が頻繁であるか、アプリケーションの一部が完全に分離されている場合は、複数のショップを作成する可能性がありますが、ステータス管理が複雑になる可能性があるため、これは推奨されません.
16-3-2. 読み取り専用ステータス
リデス状態は読み取り専用です.ステータスを更新する場合は、既存のオブジェクトに触れることなく、新しいオブジェクトを作成する必要があります.
Ridexで不変性を保つ必要があるのは,内部ではデータの変化を検出するために簡単な比較(浅い等しい)検査が行われるためである.オブジェクトの変化が検出されると,オブジェクトの奥底を比較するのではなく,軽く味わう比較によって良好な性能を維持する.
16-3-3. reducerは純粋な関数です
変化を引き起こすreducer関数は純粋な関数でなければならない.以下の条件を満たさなければならない.
yarn global add parcel-bundler
yarn global이 설치되지 않는다면 npm install -g parcel-bundler를 하면 된다고 한다.mkdir vanilla-redux
cd vanilla-redux
yarn init -y<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
</head>
<body>
<div>바닐라 자바스크립트</div>
<script src="./index.js"></script>
</body>
</html>console.log("hello parcel");parcel index.htmlyarn add redux.toggle {
border: 2px solid #333;
width: 64px;
height: 64px;
border-radius: 32px;
box-sizing: border-box;
}
.toggle.active {
background: yellow;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="toggle"></div>
<hr />
<h1>0</h1>
<button id="increase">+1</button>
<button id="decrease">-1</button>
<script src="./index.js"></script>
</body>
</html>const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference = { type: INCREASE, defference });
const decrease = () => ({ type: DECREASE });const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference = { type: INCREASE, defference });
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference) => ({
type: INCREASE,
defference,
});
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};
// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
// action.type에 따라 다른 작업을 처리
switch (action.type) {
case TOGGLE_SWITCH:
return {
...state, // 불변성 유지
toggle: !state.toggle,
};
case INCREASE:
return {
...state,
counter: state.counter + action.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}import { createStore } from "redux";
const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (defference) => ({
type: INCREASE,
defference,
});
const decrease = () => ({ type: DECREASE });
const initialState = {
toggle: false,
counter: 0,
};
// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
// action.type에 따라 다른 작업을 처리
switch (action.type) {
case TOGGLE_SWITCH:
return {
...state, // 불변성 유지
toggle: !state.toggle,
};
case INCREASE:
return {
...state,
counter: state.counter + action.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}
const store = createStore(reducer);const store = createStore(reducer);
const render = () => {
const state = store.getState(); // 현재 상태를 불러옴
// 토글 처리
if (state.toggle) {
divToggle.classList.add("active");
} else {
divToggle.classList.remove("active");
}
// 카운터 처리
counter.innerText = state.counter;
};
render();const render = () => {
const state = store.getState(); // 현재 상태를 불러옴
// 토글 처리
if (state.toggle) {
divToggle.classList.add("active");
} else {
divToggle.classList.remove("active");
}
// 카운터 처리
counter.innerText = state.counter;
};
render();
store.subscribe(render);render();
store.subscribe(render);
// 액션 발생 시키기
divToggle.onclick = () => {
store.dispatch(toggleSwitch());
};
btnIncrease.onclick = () => {
store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
store.dispatch(decrease());
};16-3-1. 単一ショップ
1つのアプリケーションにショップがあります.実際、複数のショップを使うことは不可能ではありません.一部の更新が頻繁であるか、アプリケーションの一部が完全に分離されている場合は、複数のショップを作成する可能性がありますが、ステータス管理が複雑になる可能性があるため、これは推奨されません.
16-3-2. 読み取り専用ステータス
リデス状態は読み取り専用です.ステータスを更新する場合は、既存のオブジェクトに触れることなく、新しいオブジェクトを作成する必要があります.
Ridexで不変性を保つ必要があるのは,内部ではデータの変化を検出するために簡単な比較(浅い等しい)検査が行われるためである.オブジェクトの変化が検出されると,オブジェクトの奥底を比較するのではなく,軽く味わう比較によって良好な性能を維持する.
16-3-3. reducerは純粋な関数です
変化を引き起こすreducer関数は純粋な関数でなければならない.以下の条件を満たさなければならない.
Reference
この問題について(反応を記述する技術(反応ライブラリを理解する)), 我々は、より多くの情報をここで見つけました https://velog.io/@dohy9443/리액트를-다루는-기술-리덕스-라이브러리-이해하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol