React

redux-saga

용성 2021. 9. 11. 02:43

https://github.com/gildydtjd/redux-study

 

GitHub - gildydtjd/redux-study: redux / redux-saga / redux-thunk

redux / redux-saga / redux-thunk. Contribute to gildydtjd/redux-study development by creating an account on GitHub.

github.com

 

 

1. saga 만들기

import { delay, put, takeLatest, takeEvery } from 'redux-saga/effects';
import { decrease, increase } from '../action/action';
import { DECREASE_ASYNC, INCREASE_ASYNC } from '../type/type';

function* increaseSaga() {
  console.log('increase_saga 실행');
  yield delay(1000);
  yield put(increase());
  console.log('increase_saga 종료');
}

function* decreaseSaga() {
  console.log('decrease_saga 실행');
  yield delay(1000);
  yield put(decrease());
  console.log('decrease_saga 종료');
}

function* counterSaga() {
  yield takeEvery(INCREASE_ASYNC, increaseSaga);
  yield takeLatest(DECREASE_ASYNC, decreaseSaga);
}

export default counterSaga;

 

2. redux compose, composeWithDevTools

함수를 오른쪽에서 왼쪽으로 조합합니다.

이것은 함수형 프로그래밍 유틸리티로, Redux에는 편리함을 위해 포함되어있다.

여러 스토어 인핸서들을 순차적으로 적용하기 위해 사용할 수 있다.

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);

 

728x90

'React' 카테고리의 다른 글

setState / useState  (0) 2021.10.20
Next Js  (0) 2021.04.22
Redux 다시 돌아보기  (0) 2021.04.21
React Router 파라미터와 쿼리  (0) 2021.02.25
redux ++  (0) 2021.02.17