Web/Redux (5) 썸네일형 리스트형 [Redux] 비동기 처리 - 비동기 처리의 경우 서버에서 데이터를 받아오는 것이기 때문에 성공/실패 경우를 고려해야 함 * 로그인의 경우 로그인 / 로그인 중 / 로그아웃 중 이러한 액션이 추가로 필요함 - request 액션을 만들고 loading state를 추가하여 loading 효과를 넣으면 사용자 경험이 좋음 - saga에서 success와 failure 같은 경우는 비동기 호출 시 액션을 put으로 생성하기에 reducer에서 작성하지 않아도 됨 - 로그인 시뮬레이션 예 1. 로그인 버튼 클릭 2. 로그인 요청 액션 dispatch 3. saga의 watchSignin이 실행되고 reducer의 로그인 요청 실행 4. saga의 로그인 함수 실행 5. 로그인 요청에서 받아온 action이 로그인 함수의 파라미터로 전달.. [Redux] redux-saga - reducer를 분할하였으면 saga도 root-reducer처럼 분할해야함 - generator 사용시 yield로 걸어 놓은 부분을 next()로 한 줄씩 실행 할 수 있기에 테스트에 매우 유리 - generator 함수 * 중단점이 있는 함수 * yield가 있는 곳에서 멈추어 실행함 * yield 뒤에 숫자를 넣으면 객체안의 value key에 숫자를 넣어 return - saga의 원리는 generator 함수에 while(true)문안에 yield를 넣어 사용하는 것, 이벤트리스너의 동작과 비슷 - all, fork, call, put, take등의 effect가 있음 * all : 범위안의 함수를 모두 실행 * fork : generator 함수를 실행 * take : action이 실행.. [Redux] dummy 데이터 - redux 사용시 useState를 사용하여 dummy 데이터를 만들 필요 없이 redux의 initialState를 사용하여 만든다 - id는 shortId, 기타 데이터들은 faker 라이브러리를 사용하여 reducer 파일에 더미데이터를 만들고 사용하면 좋다 [Redux] reducer 분할하기 - reducer의 함수의 경우 합치는 것이 배열 혹은 객체와 같이 쉽지 않기 때문에 redux 안의 combineReducer를 사용하여 합쳐줘야 한다 - combineReducer가 자동으로 initialState들을 합쳐주기 때문에 합친뒤 메소드를 불러서 사용하는것 처럼 사용한다 - 데이터는 useSelector로 받아 사용하고 action은 dispatch를 하여 데이터를 변경한다. action creator를 정의하여 사용하기도 한다( 함수로 action을 만들어서 return) [Redux] 원리 및 불변성 흐름 - 중앙저장소( state) - action - dispatch - reducer로 연결이 되어있다 - action을 dispatch하면 reducer에 명시한 방법에 따라 값을 불변성으로 변경하여 중앙저장소에 저장한다 장점 / 단점 - action의 추적이 가능하고 내역 확인이 되기 때문에 버그 발생시 수정이 매우 편리함 - 데이터의 rollback이 가능하기에 테스트하기 편하다( redux devtools) - 데이터를 바꾸고 싶을때마다 action을 만들고 reducer를 정의해줘야하기 때문에 코드량이 매우 많아진다. 이러한 문제점을 해결하기 위해 Redux toolkit이 개발되었다 사용 - reducer에 불변성으로 데이터를 넘기는 이유는 불변성 넘기는 것은 객체를 새로 생성하는 것이고 이.. 이전 1 다음
