알림

• 리덕스 saga를 간단히 알아보기 전 제니레이터 함수와 thunk를 알아보자

제네레이터

• 정의 : 중단점이 있는 함수

const gen = function*(){ 
    console.log("1")
    yield
    console.log("2")
}

- const generator=gen()
1. generator.next() => 1
2. generator.next() => 2

const gen=function*(){
    while(true){
        yield "무한"
    }
}
- const generator=gen()
1. generator.next() => "무한" -> 무한반복 안됨

• get().next로 yield로 까지 실행

redux-thunk

• thunk(프로그래밍 용어) : 지연된 함수

• 한번에 디스패치를 여러번 할 수 있도록 해준다.

• thunk 깃헙소스(dispatch 안 dispatch가 가능)

export const loginAction=(data)=>{
    return(dispatch)=>{
        dispatch(loginRequestAction());
        
        try {
            dispatch(loginSuccessAction());
        }
        catch ((err)=>{
            dispatch(loginFailureAction(err))
        })
    }
}

redux-saga/effects

1. all, // 배열안에 있는 함수 전체 실행
   -ex)

    yield all([fork(watchLogin), fork(watchLogOut), fork(watchAddPost)]);

2. fork, // 함수 실행
3. call, // 함수 실행

• fork vs call 차이점 => fork 비동기함수 호출 call은 동기함수

        const result = yield call(loginAPI, action.data); 
        -> 장점 : 테스트하기편함
      
         // const l = logIn({ type: 'LOG_IN_REQUEST', data: { id: 'id' } });
        // l.next()

4. put, 값 넣어줄수있다.

 yield put({
            type: 'LOG_IN_FAILURE',
            data: err.response.data,
        });

5. delay, //setTimeout과 같은기능
6. debounce,
7. throttle, //yield throttle('ADD_POST_REQUEST', addPost, 2000); //시간
8. takeEvery, take는 1회용이기 때문에 while문을 사용해야하는데 해당을 방지
9. takeLatest, // 제일 마지막에 호출만 실행

thunk vs redux-saga

• 제 생각에는 redux-saga 압승~ 기본적으로 만들어져있는 내장 함수들이 엄청 많음
• thunk를 사용시에는 해당 함수를 자바스크립트로 순수 손코딩해야합니다 ㅜㅜ

---

Immer 사용법!

• 사용이유 : 얇은복사 등을 통해 불변성을 유지하는 소스감소를 위해 필요

소스코드 example

import produce from 'immer';
...

const reducer = (state = initialState, action) => {
    return produce(state, (draft) => {
		
         const post = draft.mainPosts.find(
                    (v) => v.id === action.data.postId
                );
                post.Comments.unshift(dummyComment(action.data.content));
                draft.addCommentLoading = false;
                draft.addCommentDone = true;
                break;

		default:
  		     break;
        }
    });
    ...
    

• 자동으로 불변성을 잡아준다
• break 필수 !(switch문을 사용한 reducer경우)

next.js에서 configureStore setting

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware, loggerMiddleware];
    const enhancer =
        process.env.NODE_ENV === 'production'
            ? compose(applyMiddleware(...middlewares))
            : composeWithDevTools(applyMiddleware(...middlewares));

    const store = createStore(reducer, enhancer);
    store.sagaTask = sagaMiddleware.run(rootSaga);
    store.dispatch({
        type: 'CHANGE_NICKNAME',
        data: '100dong',
    });
    return store;
};

• 미들웨어는 리덕스에 없는기능 향상이가능
• 미들웨어는 3단 고차함수 그래서 액션이 발생시 자동실행 할수 있다