dux

1.Reduxとは

リポジトリであり、データを1つの場所に集約し、どこでも表示できます상태관리

2. Redux? ステータス管理？どうして

データが親から一方向にぼやけているため、子部品は親部品の状態を自由に操作できません.App 컴포넌트およびそのサブ자식 컴포넌트が同一のデータストアを表示する場合、より容易にデータを処理することができ、데이터의 상태관리を可能にすることができる.さらに、管理データの論理をコンポーネントから削除すると、コンポーネントはビューのみを管理でき、コードの読み取りとメンテナンス性が向上します.
注:https://www.youtube.com/watch?v=QZcYz2NrDIs

3.Reduxパッケージのインストール

yarn add redux react-redux

4.Reduxの状態フロー

Reudxのステータスフローでは、4つのクラスに分けて管理できます.
1. Store
2. Action
3. Reducer
4. Component

1)冗長ストレージをコンポーネントに接続

2)コンポーネントがステータスを変更する必要がある場合にAction

を呼び出す

3)Reducerによる新規状態値の作成

4)新しい状態値をリポジトリ

に保存

5)コンポーネントは、新しい状態値を受け入れる.(porpsで受信して再レンダリング)

5.Redux用語

1) State

Ridexに格納されている상태값(データ)をStateと呼びます.
バイナリ形式({[key]:value})で保存

2) Action

ステータスが変化すると(所有するデータが変化します).

Action

// Action은 객체입니다. type은 각자 임의로 정한 문자열을 넣습니다.
{type : 'CHNAGE_STATE` , date: {...}}

ActionCreator

//이름 그대로 함수
const changeState = (new_data) => {
// 액션을 리턴 (액션 생성 함수니까)
	return {
		type: 'CHANGE_STATE',
		data: new_data
	}
}

3) Reducer

ワイヤに格納されている状態(データ)の関数を変更します.つまり、アクション作成関数の呼び出し->アクションの作成->アクチュエータによる現在の状態(データ)とアクションオブジェクトの受信->新しいデータの作成->戻る

// 기본 상태값을 임의로 정함
const initialState = {
	name: 'mean0'
}

function reducer(state = initialState, action) {
	switch(action.type){
		// action의 타입마다 케이스문을 걸어주면, 
		// 액션에 따라서 새로운 값을 돌려줍니다.
		case CHANGE_STATE: 
			return {name: 'mean1'};

		default: 
			return false;
	}	
}

4) Store

ショップには、リカバリ、現在のアプリケーションのステータス、およびリカバリから値を取得し、アクションを呼び出すためのいくつかの組み込み関数が含まれています.
ディック・シャナリーor jsonに似ている.

6. Redux Hook

李徳思にもHookがあるデータのインポートとステータスの更新.

// useDispatch - 데이터를 업데이트할 때
// useSelector - 데이터를 가져올 때
import {useDispatch, useSelector} from 'recat-redux'

const my_lists = useSelector((state) => state.bucket.list);
const addBucketList = () => {
    ...
    dispatch(createBucket(text.current.value));
}

の最後の部分

Reactは状態管理の花Reduxを学んだreactを最初に学習すると、学習曲線がかなりの割合を占めるため、コードを書くときにもっと熟知する必要があります.