[Redux] Redux , Redux -saga 사용이유

로그인, 회원가입 ,프로필 같은경우 공통적인 데이터가있다.

그것은 바로 로그인한 사람의 정보, 로그인여부  등등이있다.

이 공통적인데이터는 컴포넌트가 분리되어있으므로 데이터가 흩어져있는데 이값을받을려면

부모 -> 자식 컴포넌트 이렇게 받아올수밖에없다.

 

이런경우를 중앙에서 한번관리를 하기위해 리덕스를 사용한다.

==중앙저장소 역할을 하자

 

리덕스이외에도 ....

mobex , contextapi , graphql(아폴로) 등 이있다!

규모가 된다면 웬만해서는 중앙저장소가 하나는 있으면 좋다 .

 

리덕스 

장점 : 에러가나면 추적이 쉽다. 앱이 안정적이게된다

단점 : 코드가 길어진다.(앱이커지면 데이터도 커진다)

극복방안 : 중앙데이터 저장소를 쪼갤수있다., 완벽한 극복은 아니지만 어느정도 극복가능 .

 

모백스

장점 : 코드가짧다.

단점 : 에러 추적이 힘들다.

 

contextApi

장점 : 라이브러리가 아니다 ?

단점 : 비동기를 받아오기 힘들다?

-- 보통 중앙저장소는 서버로부터 값을 받아온다.

비동기는 보통 3단계

요청 / 성공 /실패

이것을 context Api에서 구현을 직접 구현해야한다.

 

컴포넌트는 화면그리는것만집중!

컴포넌트는 별도의 모듈이나 라이브러리에서 데이터를 관리하자 .

 

 

Redux의 원리

데이터를 바꾸기위한 action 이필요 

바꾸기싶은 action을 계속 만들면됨  type은 action의 이름 

dispatch시 데이터가 수정(변경) 된다.

reducer에서 직접 구현해 주어야함 !

 

redux 원리

이렇게 action을 생기면 reducer 코드가 늘어난다  계속 늘어나겠지??    1 action 1 reducer 

왜 이걸 사용하냐 ?

action 하나하나가 redux에 기록이된다. (history)

기록된 action 들을 보면서 에러 추적이 되게편하다. , 로그인전 상태도 볼수있다 ! (redux dev tool)

즉 데이터의 변화가 모두 기록된다 redux 를 사용하는 이유중하나 !   

 

단점 : 쪼갤수는있다 물론, 그래도 코드가 길어지는게 단점 !

 

js . 불변성

왜 return {  }  을 저렇게 작성할까?

그냥 state.name = "바보야"  이렇게 하면 안될까?

 

() === ()   //false

const b= a;

a === b  //true

객체를 새로 만들면 다른객체이다.

객체를 참조하면 같은 객체  (a === b)

return {  } : 객체를 새로 만들어준것!  ,   내가 바꾸고싶은것만 바꾸기 위해 !

왜 객체를 새로 계속만들어 낼까?

그 이유는 객체를 새로만들어야지 변경내용이 추적되기 떄문에 ! 

 

@@

참고: 히스토리는 개발모드에서는 유지되만 배포모드가 되면 메모리를 삭제하기떄문에 히스토리를 확인할수없다 !