[Redux] 리덕스의 필요성과 구성 요소, 작동 원리

 

리덕스

어플리케이션의 state를 관리하기 위한 JavaScript 오픈소스 라이브러리.

리덕스 이전에는 양방향 데이터 흐름으로 프로젝트가 커질수록 불편과 혼란을 야기

트렌드나 관리가 복잡해짐에 따라 단방향 데이터 흐름이란 특징을 갖는 flux를 개발

React + flux 구조에 reducer를 추가하여 리덕스 탄생.

 

 

리덕스가 필요한 이유

리덕스가 없을 때의 코드는 컴포넌트끼리 강하게 커플링(의존)되어있다.

그래서 있다고 기대하며 작동했는데 해당 내용이 없는 경우에 에러가 발생한다.

 

리덕스는 중개자 역할로 상태를 중앙집중적으로 관리할 수 있다.

 

 

 

 

리덕스 구성요소

store : 정보가 저장되는 곳. 전역적으로 호출 가능  ex)은행
    state : 실제 정보. readonly 이어야함. ex) 돈/장부
    reducer : 함수. 직접 만들어서 공급해야함. state 가공자.
            state를 입력값으로 받고 액션을 참조해서 새로운 스테이트값을 만들어서 리턴.
    은행원역할 ->
    dispatch : UI에서 값이 바뀌면 action(객체, type:create 필수 포함)이 dispatch로 전달됨.
            역할 1. 리듀서를 호출해서 state 값을 변경. 2개 인자(현재 state값, action) 전달.
                    2. subscribe를 이용해 render 함수를 호출 (state값이 바뀐 이후)
    subscribe : state 값이 바뀔때마다 render함수를 호출할 수 있음
    getState : state 값을 가져와서 render 에 전달
render : UI를 만들어주는 역할. redux와 상관없음
        getState를 이용해 state값을 가져와서 UI를 만듦.

 

출처 : 생활코딩

 

 

 

리덕스 작동 원리

action이 일어났을때 dispatch를 통해 store에 전달하면
store가 우리가 작성한 reducer를 호출해서 최종적인 state 값을 결정한다.

* reducer의 역할 :
store의 state 값을 변경해준다.
action의 값과 이전의 state 값을 이용해서 새로운 state값(복제본)을 리턴해주면
그 리턴된 값이 새로운 state 값이 된다.

state 값이 바뀔때마다
render 가 통보받아 그때마다 state값을 가져와서 화면에 그려준다.

 

 

자세히 이해해보기

1. state를 바꾸려고 할 때, state를 바꾸기 위한 action을 dispatch를 통해 store에 전달함 ( = reducer에 요청/호출함 )
2. reducer는 action({타입:"무엇을 하시오", 페이로드:'이걸로/재료'})을 받아 새로운 state값을 구해 그 사본을 store에 반영함 ( reducer=실질적인 변경자 )
3. dispatch는 state를 subscribe하고 있다가 state값이 바뀔 때마다 render에 통보함 ( 즉 dispatch가 콜백함수를 받음)
4. render가 그때마다 전달받은 state값으로 모양을 바꿔줌