122. 리덕스 흐름 TIL 23.02.01

---

 

리덕스 흐름

 

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리.
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음.
또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음(전역으로 관리 가능)

- Action : State가 변하는 것.

- Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수.

- Store : action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체.
스토어는 State를 수시로 확인해 View한테 변경된 사항을 알려주는 역할을 함

- Dispatch : 스토어의 내장 함수 중 하나로 리듀서에서 Action을 발생하라고 시키는 것 store에서 reducer함수를 실행시켜 state를 업데이트함

- Subscribe : 액션이 디스패치 될 때 마다 전달해 준 함수를 호출

- Middleware : 액션을 디스패치 했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다.(thunk 와 saga가 대표)

 

 

1. View에서 액션이 일어난다.

2. dispatch에서 action이 일어나게 된다.

3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.

4. middleware에서 명령내린 일을 수행하고 난 뒤, reducer 함수를 실행한다.

5. reducer의 실행결과 store에 새로운 값을 저장한다.

6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

 

 

(출처)https://velog.io/@annahyr/%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%9D%90%EB%A6%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0