Bblog v2 - 리덕스를 공부해보자 - 1

리덕스 - 명칭설명

Action

JS의 순수한,  type필드를 가지는 오브젝트로

ㄴ 어플리케이션에서 무언가의 행동을 묘사하는 곳

type필드는 무슨 일을 하는지 잘 묘사해야 함

또한 추가적으로 payload라는 추가묘사의 필드를 가질 수 있음

ex. member/login

 

 

Action creator

액션을 리턴을 시키는 함수이다

주로 이런 방식으로 쓰니 알아두자 

 

 

Reducer

 

리듀서는 현재의 state와  액션을 받는 함수이다

state를 필요에 따라 어떻게 업뎃할지 결정하고

그리고 새로운 스테이트를 리턴합니다

한마디로 리듀서는 액션에 따라 상태를 처리하는 이벤트 리스너라 생각하면 된다

 

리듀서는 항상 아래와 같은 룰을 지켜야 합니다

1. 현재상태와 액션을 기반으로 새 값을 계산해야 합니다
2. 이미 존재하는 state를 바꾸는 것은 허락되지 않습니다 대신 값을 복사하여서 복사된 값을 업데이트해야 합니다
3. 반드시 로직은 비동기 로직이거나 랜덤한값이 아니어야 합니다

 

리듀서 내에서는 if, switch,    loop등 마음대로 쓸 수 있다

리듀서라고 불리는 이유

Array.reduce() 파생, 무언가를 가공해서 넘겨주는 그 리듀서의 특징을 가짐

prev, next의 첫 밸류에서 리듀서를 쓰기 위한 prev이 없기에 initialvalue가 있다

리액트의 리듀서는 어레이의 리듀서와 정확히 똑같은 기능이다

prev이 stat이 되는 것이고 next가 action이 되는 것이다

 

Store

리덕스의 현상태인 state의 값들은 store에 존재하게 된다

 

Dispatch

스토어는 dispatch라는 유일한 상태변화를 시킬 수 있는 store.dispatch()라는 기능을 가진다 

또한 dispatch는 action을 인자로 넘긴다

 

 

간단하게, 액션을 실행시키는 트리거용 이벤터라 생각하면 된다

 

Selectors

store의 state에서 특정값을 뽑아내는 용도로 쓰인다

프로젝트가 커질수록 반복되는 값을 뽑는데 용이하게 쓰인다

 

 

 

리덕스의 흐름

이전에 우리는 앱을 업데이트시키는 단계인 one-way data flow를 이야기했습니다

 

state는 어떤 한 시점의 상태를 지칭합니다

UI는 state를 기반으로 표시됩니다

무언가가 일어나면 state는 일어난 기준으로 업데이트합니다

UI는 새로운 state를 기준으로 다시 업데이트합니다

 

redux에 있어서, 우리는 이 단계를 조금 더 세분화 시킬 수 있습니다

 

 

 

 

초기 셋업

리덕스 스토어는 루트 리듀서 함수를 이용하여 만들어집니다

루트리듀서가 한번 불려지면 initialstate들을 저장합니다

UI가 처음 렌더되면 UI컴포넌트들은 리덕스의 현재상태로 접근합니다

그리고 그들은 어떤 값을 쓸지 결정하여 렌더 합니다

또한 업데이트될 내용을 위해 항상 바뀔 store에 대해 구독합니다

 

 

 

 

 

업데이트

앱에서 클릭이라는 행위가 일어났을 때

앱코드는 액션을 dispatch를 이용하여 리덕스에 접근합니다

ex dispatch({type: 'counter/increment'})

그러면 리듀서가 이전 값과 현재 값으로 액션으로 반환한 값을 state에 저장합니다

store는 자신을 구독하고 있는 UI에게 값이 변경되었다고 알립니다

UI들은 업데이트되었는지 이제 확인을 하고 새 데이터를 렌더링 하고 우리는 그 내용을 볼 수 있게 됩니다

 

 

 

 

 

 

종합 

 

리덕스는 상태관리를 글로벌하게 할 수 있게끔 하는 라이브러리다

보통 리액트와 함께 쓰인다

redux툴킷은 당신의 마법 같은 리덕스 로직에 도움을 준다

 

리덕스는 one-way data flow 앱 구조를 가진다

state는 특정시점의 앱상태를 설명, UI는 state기반으로 렌더 됨

앱에서 행동이 일어나면

UI작업전달(dispatch) > reducer 실행 > notice to UI > UI는 그걸 보고 업데이트

 

redux는 여러 유형의 코드를 사용합니다

action은 type이라는 필드를 가지고 행위에 대한 오브젝트이다

리듀서는 이전 값과 액션을 기반으로 새로운 값을 만들어내는 함수이다

store는 액션이 dispatched시 루트리듀서를 실행시키는 역할

 

 

 

 

----

 

새 개인 프로젝트에서 쓰일 리덕스..

vue에서 vuex도 익숙하고 pinia 쓸 때는 냅다 예제 몇 개 보고 바로 쓸 수 있었지만

리덕스는 그 악랄한 보일러플레이트의 양을 보고 한숨을 쉬고 다큐먼트를 정독하기로 했다 

일단 리덕스 놓는 거는 백엔드를 다 구성하고 시작해야겠다

그전에 공부로 리덕스 도큐먼트 하나 읽는데 30분이면 정독가능하니

하루에 하나씩 읽고 정리해 봐야겠다