[React] Redux #1 | 주요 키워드

Redux의 주요키워드는 대부분 useReducer을 사용할 때 접해본 개념들이다!

 

1️⃣ 액션 (Action)

• 상태에 어떤 변화가 필요할 때, 액션을 발생!
• 하나의 객체로 표현

  {
  	type: 'TOGGLE_VALUE"
  }​

• type 필드가 필수적, 그 외의 값들은 개발자 마음!

 

2️⃣ 액션 생성 함수 (Action Creator)

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

  export function addTodo(data){	// data를 파라미터로 받아옴.
  	return {	// 액션 객체 형태로 만듦
      	type: 'ADD_TODO',
          data
      };
  }
  
  //화살표 함수로도 만듦! (파라미터로 받아오는 대신!)
  export const changeInput = text => ({
  	type: 'CHANGE_INPUT',
      text
  });​

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

 

3️⃣ 리듀서 (Reducer)

• 변화를 일으키는 함수
• 두가지 파라미터를 받아옴
  1. state : 현재의 상태
  2. action : 이 전달 받은 action 값을 참고하여 새로운 상태 만들어 반환

     function reducer(state, action) {	//state, action을 파라미터로 받아오기
     	//상태 업데이트 로직
         return alteredState;
     }​

• useReducer를 사용할 때 작성하는 리듀서와 똑같은 형태를 가짐
• 예를 들어 카운터를 위한 리듀서를 작성해보자

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

• 이때 redux의 reducer에서는 기존 state를 그대로 반환해야한다!
  • useReducer에선 일반적으로 default: 부분에 throw new Error('Unhandled Action')과 같이 에러를 발생시키도록 처리했음
• 리덕스를 사용할 때는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들수 있다.
  • 루트 리듀서 안의 작은 리듀서들 = 서브 리듀서

 

4️⃣ 스토어 (Store)

• 리덕스는 한 어플리케이션 당 하나의 스토어를 만듦
• 스토어 안에 들어가는 것
  1. 현재의 앱 상태
  2. 리듀서
  3. 추가적인 몇가지 내장 함수들

 

6️⃣ 디스패치 (dispatch)

• 스토어의 내장 함수
• 액션을 발생 시키는 것
• 액션을 파라미터로 전달 : dispatch(action)
  • 위와 같이 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만듦.

 

➕ 구독 (subscribe)

• 스토어의 내장 함수
• 함수 형태의 값을 파라미터로 받아옴
• 특정 함수를 subscribe 함수에 전달해주면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출됨.
• 보통 직접 사용할 일은 없다.
  • 대신, react-redux 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook을 사용하여 리덕스 스토어의 상태에 구독함

 

---

Reference

벨로퍼트의 모던 리액트