Redux 정리

Redux란?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 자바스크립트 상태 관리 라이브러리이다.
Redux는 React 뿐만 아니라, Angular,vanilla javascript, Vue 등 다른 프레임워크/라이브러리도 함께 쓰일 수 있다. 보통은 react랑 많이 사용된다.

 

Redux 사용해야 되는 이유?

아래 사진이 리덕스를 설명할 때 가장 많이 사용되는 사진인데, 프로젝트가 커서 컴포넌트의 depth가 많아지게 되면 데이터 흐름이 점점 복잡해진다. 이때 redux가 데이터를 store 란 곳에 저장해놓고 필요할 때마다 얻어올 수 있기에 더욱 복잡한 데이터 흐름이 없어지게 되서 오른쪽과 같이 흐름이 간단해진다.

 

Redux 구성요소

Store

프로젝트당 1개만 등록한다. 모든 state와 reducer를 스토어에 모아서 관리한다.(데이터를 저장하는 곳)

Reducer

액션의 타입에 따라 state를 리턴해줌(데이터를 수정하는 곳)

Action

리덕스에서는 프로젝트에서 상태변화를 일으키는 것을 하나의 action 이라고 본다. action이 reducer에게 전달될 때 action type과 바뀐 데이터 값이 함께 전달됨.(어떻게 수정할지 알려주는 함수)

Dispatch

action을 발생시키는 일

 

 

 

Action 함수

 

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 공부하기"
  }
}

Reducer

function toDoReducer(state, action) {
  // 액션에 따른 상태 업데이트 로직
  return alteredState;
}