리덕스 이해하기

Intro 리덕스 포스팅 글들을 보면, 사전개념이라는 카테고리로 항상 action, store 등등을 사전적인 정의처럼 맥락없이 설명하는데, 저는 이번에 flux pattern 속에서 이해하는 것을 시도해 볼 것입니다. FLUX Pattern flux-simple-f8-diagram-with-client-action-1300w.png flux 어플리케이...

Intro Flux Pattern에서 모든 것의 시작은 action이었습니다. action부터 시작해봅시다. Action Action이란? Action. 새로운 반응이 생겼습니다. 무언가를 해달라는 요청이 생겼어요! 어떤 반응인지를 정의하는 type 필드를 포함하여 필요하면 데이터까지 같이 담아 보냅니다. type과 action creator type은...

Intro action이 발생하여 dispatch가 되면 그 다음은 reducer가 실행되겠죠. dispatch는 UI와 연결하여 실행되어야 하니 먼저 reducer를 작성해 봅시다. Init state 리듀서는 초기 state값과 action을 받아서 새로운 state를 반환하므로, 먼저 init state를 작성합니다. reducer 작성 여기서의...

리듀서까지 만들었다면 이제 붙여서 확인해볼 수 있는 준비는 완료된 것입니다. 하나씩 해보도록 합시다 >_< 잠깐, next.js를 사용하신다면.. 현재 next.js로 프로젝트를 만들면서 블로그 작성중이라 next.js에 대한 내용이 추가되네요. 이 시리즈에서 next.js를 사용하신다면 추가로 설치해야 할 게 있습니다. reducer 합치기. 보통 하...

미들웨어를 사용하는 이유 리덕스에서 리듀서는 순수함수여야 하는 규칙이 있습니다. 지키지 않는다고 오류가 나는 것은 아니지만, state가 동일한지 여부를 따져서 리덕스가 동작하기 때문에 state를 만드는 리듀서 자체에 같은 인풋에 따른 같은 아웃풋 값을 보장할 수 없다면 불필요한 연산이 실행될 수 있습니다. 따라서 리듀서를 순수함수로 남겨두기 위해 red...

공식 홈페이지에서 말하는 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 합니다.즉, 자바스크립트로 개발을 할 때 데이터의 상태를 복잡하지 않게 다루겠다는 것으로 들리네요.그러면 리덕스가 어떤 방법으로 복잡성을 낮추는지 살펴봅시다.store라는 저장소를