리덕스(Redux)에 대해 알아보자

리덕스(Redux)

컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리

글로벌 상태 관리

=> Context API, useReducer와 유사

 

리덕스를 사용하는 것과 Context API를 사용하는 것의 차이

리덕스는,,,

1. 미들웨어
2. 유용한 함수(connect)와 Hooks(useSelector, useDispatch, useStore)
3. 하나의 커다란 상태 (모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어 사용)

concat: 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있다.

useSelector, useDispatch, useStore: 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 있다.

 

리덕스는 언제 써야 할까?

1. 프로젝트의 규모가 큰가?
   • Yes: 리덕스
   • No: Context API
2. 비동기 작업을 자주 하게 되는가?
   • Yes: 리덕스
   • No: Context API
3. 리덕스를 배워보니까 사용하는게 편한가?
   • Yes: 리덕스
   • No: Context API 또는 MobX

 

 

1. 리덕스에서 사용되는 키워드

 

액션 (Action)

{
  type: "TOGGLE_VALUE"
}

 

액션 생성함수 (Action Creator)

액션을 만드는 함수

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

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

 

리듀서 (Reducer)

변화를 일으키는 함수

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

state: 현재 상태

+

action

=> 새로운 상태를 만들어서 반환

(+) Root Reducer: 여러 개의 리듀서를 만들고 이를 합쳐서 루트 리듀서를 만듦

 

스토어 (Store)

현재의 앱 상태, 리듀서, 내장함수들이 들어있다.

 

디스패치 (dispatch)

  - 액션을 발생 시키는 것

  - 액션을 파라미터로 전달한다. dispatch(action)

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

  - 스토어의 내장함수 중 하나

 

구독 (subscribe)

  - 함수 형태의 값을 파라미터로 받아온다.

  - subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출된다.

  - 스토어의 내장함수 중 하나

 

 

2. 리덕스의 3가지 규칙

 

1. 하나의 어플리케이션 안에는 하나의 스토어가 있다.

 

2.  상태는 읽기 전용이다.

=> 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트한다. 불변성!!!

 

3. 리듀서는 순수함수여야 한다.

• 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.
• 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다.