Redux

https://react.vlpt.us/redux/01-keywords.html

벨로퍼트 리덕스 강의 내용을 참고했다.

때늦은 리덕스 정리..

Action(액션)

상태에 변화가 필요하게 될 땐 액션이란 것을 발생시키며 이는 하나의 객체로 표현된다. 형식은 아래와 같다.

{
    type: "RANDOM"
}

액션 객체는 type을 필수적으로 가지고있어야 하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

예시1)
{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}
예시2)
{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

Action Creator (액션 생성함수)

액션을 만드는 함수. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

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

// 화살표 함수
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

• 이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함.
• 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용
• 액션 생성함수를 사용하는 것이 필수는 아니다.
• 액션을 발생 시킬 때마다 직접 액션 객체를 작성할 수도 있다.

Reducer (리듀서)

리듀서는 변화를 일으키는 함수로 두가지의 파라미터를 받는다.
이전 상태값과 액션을 받아 새로운 상태를 만드는 함수를 만든다.
리듀서는 불변성을 유지해야 한다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

만약 카운터를 위한 리듀서를 작성한다면 다음과 같이 작성할 수 있습니다.

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

• 리덕스의 리듀서에서는 기존 state를 그대로 반환하도록 작성해야합니다.

• 리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있습니다. (루트 리듀서 안의 작은 리듀서들은 서브 리듀서라고 부릅니다.)

Store (스토어)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

dispatch (디스패치)

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생 시키는 것 이라고 이해하면 됩니다.

dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

subscribe (구독)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.

useSelector

리덕스 스토어 안에 들어있는 값을 조회할 때 사용하는 Hooks 이다.
useSelector를 사용해서 리덕스 스토어의 상태를 조회할 땐 상태가 바뀌지 않았다면 리렌더링이 되지 않는다는 장점이 있다.

리덕스 모듈

리덕스 모듈엔

• 액션 타입

• 액션 생성함수

• 리듀서
  세 개가 필요하다.

• Ducks 패턴을 따를 땐 액션의 이름에 접두사 넣기 > 다른 모듈과 액션 이름이 중복되는 것을 방지하기 위함이다.
  ㅉ

Rootreducer

한 프로젝트에서 여러개의 리듀서가 있을 때는 이를 한 리듀서로 합쳐서 사용을 하는데 이를 루트 리듀서라고 부른다.
리듀서를 합칠 땐 리덕스에 내장된 combineReducers 함수를 사용한다.

프리젠테이션 컴포넌트

리덕스 스토어 없이 props로만 받아와서 사용하는 컴포넌트

컨테이너 컴포넌트

리덕스 스토어의 상태를 조회하거나 액션을 디스패치 할 수 있는 컴포넌트

middleware (미들웨어)

리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음 리듀서에서 해당 액션을 받아와서 업데이트 하기 전에 추가적인 작업을 할 수 있다.

• 특정 조건에 따라 액션이 무시되게 만들 수 있다.
• 액션을 콘솔에 출력하거나 서버쪽에 로깅을 할 수 있다.
• 액션이 디스패치 됐을 때, 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
• 특정 액션이 발생했을 때, 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
• 특정 액션이 발생했을 때, 특정 자바스크립트 함수를 실행시킬 수 있다.

리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때이다.
예를 들어 백엔드 API를 연동해야 된다면 리덕스 미들웨어를 사용해서 처리하는 것이 있다.

오늘의 TMI

• 2기 수료하신 지영멘토님께 이것 저것 여쭤봤는데 이 분도 혼자만 늦는 거 같다는 고민을 하셨던 때가 있었구나 하면서 생각이 많아졌다. 그럼에도 불구하고 해내신 걸 보면 내 입장에선 그저 빛..
• 어디에서나 기초, 기본은 중요하단 생각은 변함이 없어서 항해 커리큘럼을 따라가기가 벅차다고 느끼는 것 같다.
  • 과연 포텐셜이 터질 것인가.. 다 자기 하기나름이겠지만
• 팀한테 민폐가 되지 않으려면 더 노오력을 하자~