Redux

Redux란?

React의 상태를 관리하는 라이브러리
컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 가능, 글로벌 상태 관리도 손쉽게 관리할 수 있다.

• Keyword

1) 액션(Action) : 상태에 어떠한 변화가 필요하게 될 때, 액션을 발생시킨다. 액션은 하나의 객체로 표현된다. 액션은 type 필드를 필수적으로 가지고 있어야 하며 그 외의 값들은 개발자 맘대로 넣어준다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

2) 액션 생성함수(Action creator) : 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
액션 생성 함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다. 보통 함수앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다.

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

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

3) 리듀서(Reducer) : 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다. useReducer에서 default 부분에 throw new Error로 에러를 발생시키도록 처리하는 것과 다르게 Reducer에서의 default 부분에는 기존 state를 반환하도록 작성해야 한다.
리덕스를 사용할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서(Root Reducer)를 만들 수 있다.

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

4) 디스패치(dispatch) : 스토어의 내장 함수중 하나로써, 액션을 발생시키는 것이다. dispatch라는 함수에는 액션을 파라미터로 전달한다. dispatch(action)처럼 → 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

5) 스토어(store) : 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만든다. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적으로 몇개의 내장 함수가 있다.