하고 싶은 일

redux-saga를 호출 할 때
응답을 기다리는 동안로드를 오버레이로 표시하고 싶습니다!

이런 녀석↓


심상은 material ui circular
h tps : // 마테리아 음. 코 m / 코 m 포넨 ts / p 로그 렛 s / # Shirku r

문제점

◇saga 전체를 감시해 어느 태스크가 call중이라고 판정을 하고 싶다
◇그러나, 기존의 saga의 소스나 fetch(axios) 부분에까지 침입하고 싶지 않다
◇saga 의 기술을 할 때에 필요한 코드량을 늘리고 싶지 않다

기존의 기사 등을 검색해도, 이것들을 채워 주는 방법을 찾을 수 없다···

해결책

해외 사이트에서도 보이지 않기 때문에 공식 문서를 혈안으로 읽고 낚시하면
h tps : // / 레즈 x - 가. js. 오 rg / 두 cs / 아피 /
sagaMonitor가 될 것 같습니다.
설명을 읽었지만 샘플이 설명되지 않았고 바보의 나에게는 구체적인 구현을 잘 모른다.

라이브러리를 살펴보고 sagaMonitor를 사용하는 위치를 찾았습니다.
htps : // 기주 b. 이 m/레즈 x-사가/레즈 x-사가/bぉb/아 79에 2c다 콘후우구레 S 취해. p 여 d. js

이 @redux-saga/simple-saga-monitor라는 라이브러리를 살펴보면
분명히 saga 로거로 사용하는 것 같습니다.
발화된 effect 와 해결된 effect 를 검지할 수 있는 것 같다

그래서이 sagaMonitor를 사용하여 구현합니다.

sagaMonitor

어쨌든, 우선 코드

store.js

省略
.
.
.

import createSagaMiddleware from 'redux-saga'
import {setEffect, deleteEffect} from './actions/sagaMonitor'

import rootSaga from './sagas'

// 対象のコードはここから
const watchEffectEnd = (effectId, res) => {
  store.dispatch(deleteEffect(effectId))
};

const sagaMonitor = {
  effectRejected: (e) => {
    store.dispatch(deleteEffect(e.effectId))
  },
  effectTriggered: (event) => {
    if (event.effect.type === 'CALL') {
      store.dispatch(setEffect(event.effectId))
    }
  },
  effectResolved: watchEffectEnd,
}
// 対象のコードはここまで

export const history = createBrowserHistory()
const sagaMiddleware = createSagaMiddleware({sagaMonitor: sagaMonitor})

省略
.
.
.


let store = null;

export default function configureStore(preloadedState) {
  store = createStore(
    createRootReducer(history),
    preloadedState,
    bindMiddleware()
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

그렇게 해설할 곳은 없지만

createSagaMiddleware()의 인수에, 작성한 sagaMonitor 오브젝트를 건네주면 되는 것만
effectTriggered 로, 발화한 태스크명이나 메소드명을 id 첨부로 취득할 수 있다
effectResolved 로, 해결한 태스크명등을 발화시에 부여된 id 첨부로 취득할 수 있다

이렇게하면 reducer가 발화시 id를 채우고 해결시 id를 삭제할 수 있습니다.

그리고는 컴퍼넌트측에서, reducer 에 무언가 막혀 있는 상태일 때는 로더를 표시시키면 좋다

effectRejected라든지 그 밖에도 메소드가 있지만, 그 근처는 잘 부탁합니다

마지막으로

sagaMonitor가 이러한 사용법을 사용할 수 있는지 확실하지 않습니다.