리덕스를 통한 리액트 상태관리 흐름도

 

리덕스를 통한 리액트 상태관리 흐름도

 

GitHub - SangHun-OH/Sparta-React

- 위의 BucketList Projects 에서 여지껏 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있다. 또한 추가하기 버튼도 App.js에 있다.

- 컴포넌트를 만들어 분리하면, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문에 컴포넌트화 시키기 어렵다. 

- 이와 같은 경우에는, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 사용하면 된.다

- 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용하다.

- 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 뷰만 관리하면 된다.

 

상태관리 흐름도

 

• (1) 리덕스 Store를 Component에 연결한다.
• (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
• (3) Reducer를 통해서 새로운 상태 값을 만들고,
• (4) 새 상태값을 Store에 저장한다.
• (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?)