saga flow

redux-saga 생성

1. action 타입 선언

const GET_BLUR = "GET_BLUR";

2. action 함수 생성 (일반 함수일 경우) 

const getBlur = createAction(GET_BLUR)();

3. action 함수 생성 (비동기 함수일 경우) SUCCESS, FAILURE를 나눠줍니다.

const getBlurAsync = createAsyncAction(
  GET_BLUR,
  GET_BLUR_SUCCESS,
  GET_BLUR_FAILURE
)();

 

4. reducer 함수 생성

const blurReducer = createReducer(initialState, action){
  [GET_BLUR] : (state) => ({
    ...state,
    ...
  }),
  
  [GET_BLUR_SUCCESS] : (state, action) => ({
    ...state,
    ...
  })
  // 비동기 함수 성공의 경우
  
  [GET_BLUR_FAILURE] : (state, action) => ({
    ...state,
    ...
  })
  // 비동기 함수 실패의 경우
  
}

 

5. saga 함수 생성 : ( 비동기 처리 )

function* getBlurSaga(action){
  ...
  try{
    yield.call() // api 호출
    yield.put(getBlurAsync.success) // 성공 시 dispatch reducer
  } catch(e){
  	yield.put(getBlurAsync.failure) // 실패 시 dispatch reducer
  }
}

 

6. saga 사용 함수 생성

function* userSaga(){
  yield takeEvery(GET_BLUR, getBlurSaga); // getBlurAsync에 등록되어있는 { GET_BLUR , GET_BLUR_SUCCESS, GET_BLUR_FAILURE } 와 연결?
}

 

7. rootSaga로 sagas 합침 -> redux config 에서 미들웨어 사용 설정 

function* saga(){
  yield all([..., blurSaga(), ...])
}

 

 

redux-saga 사용

dispatch(getBlurAsync.request({ ... }));