# redux saga
노마드 코더 [ReactJS로 영화 웹 서비스 만들기] 리덕스와 인피니티 스크롤 적용하여 무한으로 즐기기
들어가기 앞서 위 글은 기존 노마드 코더님의 강의인 'ReactJS로 영화 웹서비스 만들기'를 바탕으로 공부한 부분을 적용하여 리뉴얼 하였습니다. 기존 클래스형 컴포넌트에서 함수형 컴포넌트로 변경한 후에, 리덕스 및 리듀서를 통해 데이터를 관리할 수 있도록 만들었습니
Redux toolkit 을 React에 적용하기 ep.2 (counter 예제)
CRA(create-react-app) +Typescript 위에서 redux-toolkit 공식문서에 있는 간단한 카운터를 따라해보자
import {combineReducers, createStore, applyMiddleware, compose } from 'redux ' 란 무엇인가?
redux를 사용시, 유의할 점은 앱에 하나 이외의 스토어를 만들면 안된다는 것이다. 대신 여러개의 reducer를 하나의 rootReducer로 묶어서(통합된 하나의 스토어를 만들기 위함) 사용하기 위해 combineReducers가 필요하다앱 내에, 단 하나만 존재
Redux Saga를 이용한 API 요청 상태 관리
Redux Saga를 이용해 비동기적으로 api를 호출할 때 요청에 대한 5가지 상태 ( 요청 시작, 로딩 중, 요청 성공, 요청 실패, 로딩 끝 ) 관리를 다루는 글입니다.네트워크 요청을 위한 /lib/api.jsloading 상태를 관리할 reducers 파일 /r
Redux-saga
전 시간에는 redux-thunk라는 redux에서 비동기 작업을 할 경우에쓰이는 미들웨어에서 정리하고, 작업했던 TodoApp에 setTimeout으로간단하게 진행을 했다.redux-thunk는 정말 사용하기는 너무 간단하고,추가적으로 배워야 할 문법 또한 없다.하지
Redux Saga Effect (take)
특정한 액션을 기다리기 위해서 미들웨어에 알려주는 명령 오브젝트를 생성합니다. 비동기 통신을 하다보면 원하는 타이밍에 데이터를 보여주고 싶을때가 있다.ex)클릭 하면 리스트가 나오는 등등등이럴때 클릭했을때 통신을 날리면 내가 원하던 타이밍에 데이터가 나오지 않을 수 있
[FESSPORT] - 페스티벌 컨텐츠 제공 서비스 Typescript, Redux-saga 4주 프로젝트 돌아보기.
Intro. 이글은 코드스테이츠의 모든 Sprint 와 Assessment, 2주간의 First Project 이후, 4주간의 Final Project의 회고글입니다. First때와 마찬가지로 팀원으로서 프로젝트를 진행하였고, 파이널 프로젝트에선 Front-End
크로스 브라우징😵-4 IE11에서 Redux, Redux-saga 사용하기 (feat. babel, webpack)
IE11에서 Redux-saga 사용하기 전 포스팅을 마치고 나서 아 이제 난 babel을 이용하여 프로젝트를 진행할 수 있겠다... 라고 생각했지만... redux-saga가 동작되지 않는 일이 발생 했습니다.... 분명 polyfill을 사용해 프로젝트를 진행할 때
Redux-saga & React Hooks에서 상태조회하기 - select 메소드
Hooks에서는 getState로 상태를 조회할 수 없다.saga의 select 메소드를 사용해야 한다..!출처: 스택오버플로우
Redux-Saga 를 이용한 비동기 액션 처리
상탯값 변경은 비동기로 발생하는 경우가 많다. API 호출을 통해서 서버로부터 데이터를 받아 오는 것이 대표적인 비동기 코드이다. redux-saga는 액션을 모니터링하다가, 특정 액션이 발생하면 특정 작업(자바스크립트 코드 실행, 다른 액션 디스패치, 상태 조회 등)
에러를 감지할 때 catch문 겹쳐쓰지 않기
아래 함수의 catch문이 정상작동하지 않았다. 400에러가 났는데도 SUCCESS_GET_TOKEN_BY_AUTH_KEY를 작동시켰다.saga에서 InactiveEmail이라는 HTTP api를 사용하고 있었고, 그 내부에서 catch문으로 에러를 처리하고 있었다.
redux saga fork
이런식으로 기존에는 saga파일들을 묶어줄때 fork를 사용해서 불러왔었다.하지만 알아본결과 fork는 백그라운드로 작동하고 있는 방식이였고 호출은 call을 사용해야 한다.fork는 백그라운드에서 동적으로 실행부모함수는 fork된 함수가 끝나기 전까지 기다리고 끝난다
React + Django 토이프로젝트
공기업 취업 도전을 미뤄두고 Front-end 개발자가 되고 싶었던 이유는 간단하다. React가 재밌었다. NomadCoder에서 처음 접해본 React는 개발을 접었던 나에겐 신세계였고 빠져들게 했다. 그래서 토이프로젝트를 진행하게 되었고, 프로젝트를 제안한 친구에
#13 Today I Learned - 21.01.20
mini project : Redux Movie App ❗️ javascript : axios로 받아온 state 값 assign 하기
#12 Today I Learned - 21.01.19
mini project : Redux Movie App ❗️ github : git commit edit, delete tutorial
#10 Today I Learned - 21.01.16
mini project : Redux Movie App ❗️ antd : import antd css
React NodeBird 공부 4 ( Redux-saga 연동하기 )
npm i redux-saga 와 npm i next-redux-saga 설치해준다configureStore.js에서 import를 해준뒤 sagaMiddleware 를 middlewares 에다가 넣어준뒤 store.sagaTask = sagaMiddleware.ru
#3 Today I Learned - 21.01.06
redux-saga : function*(){ }, redux-saga-effect ❗️ redux-saga : saga 사용법 ❗️ javascript : 구조 분해 할당 ❗️ javascript : axios