TIL 44 | About Redux

1.Reduxで使用するキーワードを熟知している
アクション
状態が変化する必要がある場合、私たちは動作します.これはオブジェクトとして表現されます.アクションオブジェクトは、次の形式で構成されます.

{
  type: "TOGGLE_VALUE"
}

アクションオブジェクトにはtypeフィールドが必要です.その他の値は開発者が任意に入力できます.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

アクション作成関数

動作を作成する関数です.単純にパラメータを取得し,動作対象とする.

これらの動作を作成して使用すると、後で構成部品に動作が発生しやすくなるため、関数が生成されます.したがって、

は、通常、関数の前にexportのキーワードを追加し、他のファイルからロードして使用します.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
 	data
  };
}

// 화살표 함수로도 만들 수 있다.
export const changeInput = text => ({
	type: "CHANGE_INPUT",
  	text
});

Reducer

命令は、変化を引き起こす関数である.2つのパラメータを受け入れます.

function reducer(state, action) {
  return alteredState;
}

リピータは、現在の状態(state)および受信した動作(action)を参照して新しい状態を作成し、戻る.

2default:部分に記入し、既存のstateをそのまま返却してください.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

パススルー電源を使用すると、複数のパススルー電源を作成し、ルートパススルー電源に統合できます.

ルトリードゥセネの小リドゥセはソトリードゥセと呼ばれている.

ストア

冗長性は、アプリケーションごとにストアを作成します.

ストアには現在のアプリケーションステータスとリダイレクトがあり、いくつかの内蔵関数もあります.

派遣する

Dispatchはショップの内蔵関数の一つです.それを動作を起こせばいいと理解すればいい.

動作をパラメータとして渡す.dispatch(action)

が呼び出されると、ショップはコールバック関数を実行し、アクションを処理する論理がある場合は、アクションを参照して新しいステータスが作成されます.

2.李徳思の3つのルール
1.アプリケーションにショップがあります.
1つのアプリケーションで1つのショップしか作成されません.複数のショップを利用することは可能ですが、おすすめしません.一部の更新が頻繁すぎる場合や、アプリケーションの一部が完全に分離されている場合、複数のショップが作成される場合があります.しかし、そうすれば、開発ツールを利用することはできません.
2.ステータスは読み取り専用です.
反応器でstateを更新する必要がある場合はsetStateを使用し、配列を更新する必要がある場合は配列自体を直接pushするのではなく、concatのような関数を使用して既存の配列を変更するのではなく、新しい配列を作成することで配列を更新し、代わりに更新します.同様に、オブジェクトも既存のオブジェクトには触れずに演算子を展開します(...)更新を使用します.
道徳的にもそうです.既存のステータスに触れずに新しいステータスを作成して更新する場合は、後で開発者ツールを使用して後方に移動したり、再び前方に移動したりできます.
冗長性に不変性を保つ必要があるのは,内部データの変化を検出するためである.オブジェクトの変化が検出されると、オブジェクトの奥まで比較するのではなく、軽く味わうことで比較し、良好な性能を保つ.
3.変化を引き起こす関数、reducerは純粋な関数でなければなりません.
💡 純粋な関数とは何ですか.

reducer関数は、以前の状態と動作オブジェクトをパラメータとして受け入れます.

以前の状態は絶対に触られず、変化を引き起こす新しい状態オブジェクトが作成され、返されます.

同じパラメータを呼び出すreducer関数は、常に同じ結果値を返さなければならない.

と同じ入力の場合は、常に同じ出力が必要です.

3.リドスサンプルコード

import { createStore } from 'redux';
// createStore는 스토어를 만들어 주는 함수. 단 하나의 스토어를 만든다.

// 리덕스에서 관리할 상태 정의
const initialState = {
	counter: 0,
	text: '',
	list:[]
};

// 액션 타입 정의 - 주로 대문자로 작성. 전역변수로 관리하는 것인지 궁금하다!!
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';

// 액션 생성함수 정의 = 주로 camelCase로 작성.
function increase() {
  return {
    type : INCREASE // 액션 객체에는 type 값이 필수이다.
  };
};

// 액션 생성함수의 화살표함수
const decrease = () => ({
	type : DECREASE
})

const changeText = text => ({
	type : CHANGE_TEXT,
	text // 액션 안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있다.
});

const addToList = item => ({
	type : ADD_TO_LIST,
	item
});

// 리듀서 만들기
// 위 액션 생성함수들을 통해 만들어진 객체들을 참조하여 새로운 상태를 만드는 함수를 만들어 보자.
// 리듀서에서는 "불변성"을 꼭 지켜주어야 한다.

// state의 초깃값을 initialState 으로 지정.
function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREASE : {
      ...state,
        counter: state.counter + 1
    };
    case DECREASE : {
      ...state,
        counter: state.counter - 1
    };
    case CHANGE_TEXT : {
      ...state,
        text: action.text
    };
    case INCREASE : {
      ...state,
        list: state.list.concat(action.item)
    };
    default:
      return state;
  }
}

// 스토어 만들기
const store = createStore(reducer);