[Redux] 키워드

액션

• 상태 변경 방법을 정의하는 객체
• 상태를 변경해야 할 때 발생두고 객체로 표현하다.
• 유형이 필요합니다및 기타 값은 개발자가 마음대로 만들 수 있습니다.

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

// 그 외의 값들
{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "안녕하세요"
  }
}

액션 크리에이터

• 액션을 생성하는 함수
• 간단히 매개변수를 가져와 액션 객체로 바꿉니다..
• 필수는 아니지만 액션을 직접 작성하는 대신 액션 객체를 생성하는 함수
  자주 만들어 사용합니다.

  액션이 트리거될 때마다 액션 객체를 직접 생성할 수 있습니다.

  나중에 구성 요소에서 작업을 보다 쉽게 ​​트리거하는 데 사용되므로
  일반적으로 함수 앞에 export 키워드를 사용하여 다른 파일에서 가져옵니다.하다.

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

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

// payload가 필요 없는 경우
const increase = () => {
  return {
    type: 'INCREASE'
  }
}

// payload가 필요한 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}

배송

• Store의 기본 제공 기능 중 하나
• 리듀서에 액션 전달 기능

  Action 객체는 Dispatch의 인수로 전달됩니다.하다.
  액션 객체를 수신하는 디스패치 함수는 Reducer를 호출합니다.하다.

  당신이 전화할 때 Store는 감속기 기능을 실행합니다.순서대로 행동의 처리
  논리가 있는 경우 새 상태를 만드는 작업을 참조하십시오.

  이러한 개념을 연결하는 것이 아래의 Redux Hooks입니다!

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

감속기

• 새로운 상태를 생성하는 순수 함수

  외부 요인이 상태를 예상 값이 아닌 예상치 못한 값으로 변경하는 것을 방지합니다.
  순전히 이를 방지하기 위한 기능이어야 합니다.

• Dispatch가 전달한 Action 객체의 type 값에 따라 state를 변경하는 함수

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
	}
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

쇼핑

• 정부 운영 유일한 저장소 역할

  Redux에서는 애플리케이션당 하나의 저장소를 만듭니다.

• 스토어에는 현재 앱 상태, 감속기 및 일부 내장 기능이 포함되어 있습니다.

import { createStore } from 'redux';

const store = createStore(rootReducer);

---

Redux의 데이터 흐름

액션 → 출하 → 감속기 → 저장

---

리덕스 훅

useDispatch()

• Action 객체를 리듀서에 전달하는 디스패치 함수를 반환하는 메서드입니다.

// 위에 Dispatch 예시에서 Dispatch 함수도 useDispatch()를 사용해서 만든 것
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

useSelector()

• store에 저장된 state에 접근하기 위해 컴포넌트와 state를 연결하는 메소드
  ( = Redux 상태에 액세스하기 위해 구성 요소와 상태를 연결하는 방법)

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.

import { useSelector } from 'react-redux'

const counter = useSelector(state => state)
console.log(counter) // 1