Redux [생활코딩]

자바 스크립트 어플을 위한 예측 가능하게 하는 도구 !

단 하나의 state(객체)를 가진다 !

 

 

데이터를 수정할 때 함부로 못하고 특정한 함수를 통해서 데이터를 수정할 수 있다.

 

원본을 바로 수정하는게 아닌 복제복을 수정한뒤 그것을 원본으로 바꾸는 과정을 통해 undo와 redo가 쉽고 효율적이다.

 

현재의 상태와 과저의 상태까지 확인을 할 수 있어 디버깅을 쉽게 할 수 있다.

 

Redux의 여행 지도

state라는 실제 정보에는 직접 수정할 수 없고 recduer(직접 코드작성)를 사용해야한다.

 

 

render는 UI를 만들어주는 내가 짠 코드이다.

 

dispactch, subscribe, getSate와 같은 은행에서의 직원과 같은 걸 거쳐야 reducer를 사용해 state를 수정할 수 있다.

 

render함수를 잘 만들면 state의 값이 바뀔 때마다 render되어 즉시 UI가 바뀌게 할 수 있다. 을메가 좋을꼬 ! 그 방법이 바로 subscribe

 

subscribe를 사용해서 render를 가동한다.

submit이벤트가 발생하면  dispatch를 통해 객체(action)가 하나 발송된다.  중요한건 타입이 create이다.

dispatch는 두가지 일을 한다

1. reducer를  호출하여 state의 값을 바꾼다. 그리고 2. subscribe를 이용해서 render를 호출한다. 그러면 화면이 갱신된다.

이때 dispatch에 의해서 두개의 값을 전달한다. 

1.현재의 state 값     2. actoin의 값

이때 리턴하는 객체는 state의 새로운 값이 된다.

즉, reducer는 state를 입력 값으로 받고 action을 참조해서 새로운 state값을 만들어 리턴해주는 state를 가공해주는 가공자 이다.

그리고 subscribe를 이용해서 render를 호출 한다.

 

그리고 다시 이전에 일어난 일이 일어난다. 그러면 새로운 스테이트에 맞게 UI가 바뀌게 된다.

 

 

 

 

Redux가 좋은 가장 중요한 이유

부품이 하나씩 추가 될때마다 로직(코드)가 확확 늘어난다.

 

가운데 스토어를 사용해 훨씬 적은 로직으로 전체 어플리케이션을 관리할 수 있다.

크럼 개발자 도구에 확장기능을 추가 하면 redux 사용하여 버전관리를 하여 시간이동이 가능하다.

 

Redux 없이 애플리케이션 만들기

 

 

Redux를 이용해서 애플리케이션 만들기

npm install --save redux

or

스크립트 가져와서 사용

 

 

 

 

 

1. store를 만든다. 그럼 자동으로 그 안에 state가 생긴다.

2.reducer라는 함수를 만들어서 store에 주입해 준다

 

dispatch는 창구 직원

reducer는 은행 장부에 실제로 적는사람       최초 한번은 무조건 실행된다.

state가 실제 장부

 

그리고 getstate를 써서 변경된 state를 가져온다

이전의 값을 복제한걸 action에 맞게 변경한 뒤 그걸 새로운 state로 바꿈.

 

 

 

 

 

 

 

state의 변화를 UI에 반영하기   ==> rander,, subscribe 사용

 

 

하나의 컴포넌트가 의존 없이 그 해당 컴포넌트에만 신경을 쓸수 있어 개꿀이닷 !

 

Redux 선물  시간 여행(redux dev tool를 사용한다.)

 

 

 

 

실전 Redux -CRUD 앱 만들기