전체 소스코드는 여기에서 확인해볼 수 있습니다. 개요 Redux-Saga의 Github에서는 아래와 같이 설명하고 있다. Redux-Saga는, 애플리케이션 부작용(예: 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 순수하지 않은 작업)을 보다 쉽게 관리하고, 보다 효율적으로 실행하고, 테스트하기 쉽고, 오류를 더 잘 처리하도록 만드는 것을 목표로 하는 라이브러리입니다. 그래서 언제 쓰나? 사실 Redux-Saga는 도입한다고 드라마틱하게 뭔가가 바뀌지는 않는다. 다만, 사용자 환경에 있어서 조금 더 좋은 환경을 제공해줄 뿐이지. 그 더 좋은 환경은 뭘까? API 호출 등의 비동기 작업에서 사용자 부주의로 인한 세부적 컨트롤이 가능하다. Async / Await으로 처리하는 것이..
전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ npx create-react-app redux-test --template typescript # Typescript는 옵션입니다. Redux 설치 $ npm i redux react-redux // package.json { "name": "redux-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/nod..
개요 Redux는 어렵게 생각할 필요 없이, 3단계로 이루어져있다. 설 명 Action 상태 변경을 일으키는 이벤트에 대한 정적인 정보로서, 대부분 객체 형식으로 이루어져있다. Reducer Action을 받아, 어떻게 수행할지를 정하는 함수 Store State를 관리하는 장소 예제로 살펴보기 아래는 간단하게 JS에서 테스트해본 것이다. // 테스트에서는 CDN으로 불러오는 방식을 사용했다. // const Redux = require('redux'); // 리듀서 const myReducer = (state = 0, action) => { switch(action.type) { case 'add_number': return state + 1; case 'minus_number': return stat..
