React

리덕스 ( REDUX ) 란?

매일매일코드일기장 2022. 3. 29. 22:14

리덕스란?

Javascript 상태관리 라이브러리이다.

 

 

리덕스의 기본 개념 : 세가지 원칙

1. Single source of truth

  • 동일한 데이터는 항상 같은 곳에서 호출한다.
  • 즉, 스토어라는 하나뿐인 데이터 공간이 있다

2. State is read-only

  • 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다
  • 리덕스에서도 액션이라는 객체를 통해서만 상태 변경이 가능하다

3. Changes are made with pure functions

  • 변경은 순수함수로만 가능하다
  • 리듀서와 연관되는 개념이다.
  • Store - Action - Reducer

 

Store 란?

상태과 관리되는 오직 하나의 공간이다.

  • 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 필요한 상태를 담는다
  • 컴포넌트는 상태정보가 필요하면 스토어에 접근한다

Action 란?

액션은 앱에서 스토어에 운반할 데이터를 말한다.

액션은 객체 형식으로 되어있다.

{
  type: 'ACTION_CHANGE_USER', // 필수
  payload: { // 옵션
    name: '하나몬',
    age: 100
  }
}

Reducer 란?

  • 액션은 스토어에 바로 전달하는 것이 아닌 리듀서에 전달해야한다. 
  • 리듀서는 주문을 보고 스토어에 상태를 업데이트 하는것이다.
  • 액션을 리듀서에 전달하기 위해서는 dispatch( ) 메소드를 사용해야한다

 

  Action 객체가 dispatch ( ) 메소드에 전달된다

  dispatch를 통해 reducer를 호출한다

  reducer는 새로운 store를 생성한다

 

왜 이런 공식을 따를까? 

이유는 데이터가 한 방향으로만 흘러야 하기 때문이다.

 

Redux의 장점

  • 상태를 예측 가능하게 만든다
  • 유지보수
  • 디버깅에 유리
  • 테스트를 붙이기 용의