[Redux] Redux란?

1. Redux

앱 전체 상태를 (쉽게..?) 관리하기 위한 라이브러리
리액트는 프로젝트 규모가 커질 수록 컴포넌트 개수도 많아지고 관리해야 하는 state도 많아지고 복잡해진다.
그래서 사용하는게 상태 관리 라이브러리인 Redux
 

🔎 상태(state)

상태는 컴포넌트 내부에서 변할 수 있는 값, 데이터를 말한다.
상태관리는 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유한다.

 

2. 언제 Redux를 사용해야 할까?

- 앱 전체 상태 관리가 필요할 때
- 복잡한 비동기 처리가 있는 상태 관리가 필요할 때
- 앱의 상태가 복잡하여 체계적으로 관리하고 싶을 때
- 상태관리 패턴을 도입하여 여러 개발자와 협업하고 싶을 때

3. Redux 3가지 핵심 원칙

1. Single source of truth: Store는 단 하나, 모든 앱의 상태는 이곳에 보관됨
2. Immutability: 상태는 오로지 읽을 수만 있다. 변경하려면 모든 상태가 변경되어야 함
3. Pure function(순수 함수): 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 한다.
 

4. Redux 키워드

Action: 상태를 변경하는 자바스크립트의 객체로 주로 action이 실행되는 type(필수), payload(데이터)를 포함한다.

{
  type: 'LOGIN',
  payload: {
    username: 'john',
    password: 'password'
}

 
Action Creator: Action을 생성하는 함수로 파라미터를 받아서 Action 객체를 반환한다.
직접 Action을 생성하는 것보다 Action Creator를 활용하면 재사용이 가능해 Action 객체를 매번 작성하지 않아도 된다. 

function login(username, password) {
  return {
    type: 'LOGIN',
    payload: { username, password }
  };
}

이렇게 Action을 생성하는 이유는? 컴포넌트에 Action을 쉽게 발생시키기 위해! 그래서 export/import 하여 사용한다.
 
Store: 앱 전체의 상태(state)를 보관하는 곳으로 Action에 따라 reducer에서는 새로운 상태를 만들어 내며 Store는 그 상태를 저장한다. Store의 상태는 불변하며 매 액션이 발생할 때마다 새로운 객체가 만들어진다.

function store = createStore(reducer, initialState)

 
Reducer: Action을 받아 새로운 State를 만들고 업데이트 할 수 있다. 상태 변경 시 사이드 이펙트가 없어야한다.

// 상태 초기값을 정의하기
const initialState = {
  isLoggedIn: false,
  user: null
};

// Reducer 함수는 이전 상태와 액션을 인자로 받아서 새로운 상태를 반환한다.
function authReducer(state = initialState, action) {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        user: null
      };
    default:
      return state;
  }
}

 
action.type에 따라 'LOGIN', 'LOGOUT' 두 가지 경우를 처리하는데 둘 다 이전 상태를 복사 후 새로운 객체를 반환하지만 LOGIN은 isLoggedIn을 true, user를 action.payload로 업데이트하고, LOGOUT은 isLoggedIn을 false, user를 null로 업데이트 한다.
이 외에 모든 타입 액션은 이전 상태인 state를 반환한다.
 
Dispatch: State를 업데이트 하고 싶을 때 store에 action을 전달하고 Reducer에게 요청. dispatch후 action은 미들웨어를 거쳐 reducer에 도달한다.

store.dispatch(action);

 
Selector: createSelector 함수를 사용하여 생성하는데 컴포넌트에서 필요한 상태를 선택하기 위해 사용한다.