개발자.. 너란놈..

※ redux 작업 흐름

- 컴포넌트에서 axios 데이터 요청을 해서 반환된 결과값을 action 객체로 담아서 dispatch로 리듀서에 전달
- 리듀서는 해당 action 객체의 타입에 따라 데이터를 변형한 뒤 store에 전달
- store는 리듀서로 부터 전달 받은 state 정보 값을 저장하고 index.js에서 Provider에 의해서 App 컴포넌트에 전달 됨
- 각 컴포넌트에서는 useSelector를 통해서 자유롭게 전역 State값 호출 가능
- 자식 컴포넌트에 리듀어에 전역 State값 변경 요청을 할때는 변경사항을 action 객체에 담아서 dispatch로 배송

단점)
- 각 컴포넌트에서 수정할 데이터가 api 통신을 필요로 하는 비동기 데이터일 경우 axios 함수 관리가 어려워짐
- 비동기 데이터의 요청, 성공, 실패등의 상황에 따른 관리가 불가

※ redux-saga 작업 흐름

- 기존 리듀서의 action 타입으로 요청 시작, 요청 성공 , 요청 실패로 좀 더 세분화 가능
- 리듀서에 중간 saga 작업을 연결해서 store에 전달하기 위한 미들웨어 설정을 store.js에 추가
- 기존처럼 컴포넌트에 axios 요청을 하는 것이 아닌 api 라는 요청함수를 모듈로 따로 만들어서 관리
- 컴포넌트에서 api요청이 필요 시 action을 보내면 리듀서 전달 받고 관리해야 되는 데이터가 비동기면 saga에게 작업 전달
- saga.js에서 외부 api.js라는 모듈에서 axios 함수를 호출 한 뒤 반환 받은 데이터를 action 객체로 만들어서 리듀서에 전달
- 다시 리듀서는 saga로 부터 전달 받은 데이터에 따라 다시 액션 객체를 만들고 store에 전달
- 나머지 동일

※ redux , react-redux

- redux

store : 어떤 컴포넌트에서든 자유롭게 데이터를 공유할 수 있게 컴포넌트 외부에 있는 독립적인 전역 데이터 공간
reducer : store의 데이터를 변경하는 변형자 함수 (dispatch로 전달 받는 action 객체로만 store 데이터 변경 가능)
action : 컴포넌트에서 reducer에 데이터변경 요청을 할때 쓰이는 특별한 형태의 객체 {type : '타입' , payload : '데이터'}

- react-redux

useDispatch : 컴포넌트에서 리듀서에 action 객체를 전달해주는 함수
useSelector : 컴포넌트에서 전역 store의 데이터를 가져오는 함수

redux 관련된 모든 함수들을 순수함수 형태로 구성이 되어야함 (Pure function)
- DOM이나 react의 외부 요인 없이 순수 자바 스크립트로만 동작되는 함수
- Side Effect (부수효과)를 발생시키지 않는 함수 - DOM에 직접적으로 변형을 가하지 않는 함수

순서 정리)
1. action.js -> 액션 생성후 리턴
2. reducer.js -> 액션 객체를 받아서 전역 데이터를 변형한 뒤 리턴
3. store.js -> 리듀서가 반환한 객체를 전역 store공간에 저장 후 export
4. index.js -> store 전역데이터 객체를 App 컴포넌트에 Provider로 전달
5. 원하는 컴포넌트 어디에서든 useSelector로 store 데이터 호출