redux 핵심 - 액 션 만 들 기

액 션 만 들 기
Action 은 JavaScript 대상 으로 응용 상 태 를 업데이트 해 야 하 는 모든 이 벤트 를 설명 합 니 다.이 대상 들 은 발생 하 는 특정 action 유형 을 구분 하기 위해 type 속성 을 가 져 야 합 니 다.

const LOAD_PROFILE = 'LOAD_PROFILE';

const myAction = {
  type: LOAD_PROFILE
};

type 이 설명 한 행위 가 발생 할 때 이 행위 와 관련 된 모든 데 이 터 는 action 의 속성 으로 action 에 전 달 될 수 있 습 니 다 (다시 말 하면 일반적인 JavaScript 대상 입 니 다).
Action 은 action 대상 을 구축 할 때 다음 과 같은 몇 가 지 를 주의해 야 합 니 다.

은 문자열 이 아 닌 type 속성의 값 을 상수 로 설정 하 는 것 이 좋 습 니 다.둘 다 가능 하지만 상수 로 사용 하면 맞 춤 법 오류 (예 를 들 어 LAOD_PROFILE 과 LOAD_PROFILE) 가 발생 하면 콘 솔 은 알림 없 이 실행 에 실패 하지 않 고 오 류 를 표시 합 니 다.

은 부하 데 이 터 를 가능 한 한 작 게 한다.자원 에 필요 한 데이터 만 보 내 도록 하 세 요!

Action Creators
Redux action 은 JavaScript 대상 으로 응용 상 태 를 업데이트 해 야 할 모든 이 벤트 를 설명 합 니 다.그러나 일반 대상 은 이식 이 쉽 지 않다.action 을 쉽게 이식 하고 테스트 하기 위해 서 는 함수 에 포 함 됩 니 다.이 함수 들 을 action creator 라 고 합 니 다.용어 'action creator' 는 action 을 만 들 고 되 돌려 주 는 함수 이기 때문에 이해 하기 쉽다.

const submitUser = user => ({
  type: SUBMIT_USER,
  user
});

지금 우리 가 SUBMIT_USER action 이 필요 하 다 면 submitUser() 함 수 를 호출 하여 user 에 전달 하면 이 action 을 생 성 할 수 있 습 니 다!
프로젝트 구축 시작
우 리 는 과정 프로젝트 Udacimeals 를 구축 합 시다!이 앱 은 일주일 내 내 아침, 점심, 저녁 을 추적 할 수 있 는 맞 춤 형 달력 을 제공 할 것 이다.사용 자 는 Edamam 's Recipe Search API 의 레 시 피 를 이용 하여 API 를 검색 한 후 선택 한 재료 쇼핑 목록 을 생 성 합 니 다.
다음 두 가지 응용 상태 변경 방식 을 표시 하기 위해 action 을 작성 할 것 입 니 다.

새로운 식단 추가

달력 에서 어떤 음식 을 삭제 합 니 다.

우 리 는 Create React App 비 계 를 사용 할 것 이다.이 도 구 를 설치 한 후에 새로운 응용 프로그램 을 만 듭 니 다.이전 'React 기초 지식' 과정 을 다시 읽 고 배 운 지식 을 복습 할 수 있다.
프로젝트 비계 의 commt 입 니 다.
총결산
이 부분 에서 우 리 는 action 과 action creator 를 배 웠 다.
Redux 의 Action 은 JavaScript 대상 입 니 다. 응용 프로그램 에서 응용 상 태 를 업데이트 해 야 할 모든 이 벤트 를 설명 할 수 있 습 니 다.

const LOAD_PROFILE = 'LOAD_PROFILE';

const loadProfileAction = {
  type: LOAD_PROFILE
};

일반 대상 은 이식 이 쉽 지 않 습 니 다. action 을 쉽게 이식 하고 테스트 하기 위해 서 는 'action creator' 라 는 함수 에 포 장 됩 니 다.이 액 션 들 은 상태 자 체 를 수정 하지 않 습 니 다.그들 은 단지 일부 사건 이 발생 했 으 니 상 태 를 갱신 해 야 한다 고 지적 할 뿐이다.반드시 action 을 전일 성 을 유지 해 야 하 며 부작용 이 나타 나 서 는 안 된다.

const loadProfile = user => ({
  type: LOAD_PROFILE,
  user
});

현재 의 문 제 는 다음 에 무엇 을 해 야 합 니까?현재 우 리 는 생 성 대상 (action) 만 소개 하고 함수 (action creator) 에 이 대상 들 을 패키지 합 니 다.우 리 는 여전히 두 가지 문제 에 대답 해 야 한다.우선, Redux 는 이 action creator 를 호출 할 때 응용 상 태 를 수정 해 야 하 는 지 어떻게 압 니까?그 다음 에 우 리 는 어떻게 이러한 action 에 따라 응용 상 태 를 어떻게 바 꿔 야 합 니까?이 두 가지 문 제 는 Redux 의 reducer 를 이 끌 어 냈 다.
. / src / actions / index. js 코드 예시

//      action  
export const ADD_RECIPE = 'ADD_RECIPE'
export const REMOVE_FROM_CALENDAR = 'remove_from_calendar'

//       actions creator return actions  ，      {day,recipe,meal}
export function addRecipe({day,recipe,meal}) {
    return {
        type:ADD_RECIPE,
        recipe,
        day,
        meal
    }
}

//   actions creator return actions  ,      {day,meal}
export function removeFromCalendar({day,meal}) {
    return {
        type:REMOVE_FROM_CALENDAR,
        day,
        meal,
    }
}