redux-saga 설치 및 기본

https://aloha2jh.tistory.com/51

redux

비동기인 일을 처리할때 리덕스사가

리덕스가 동기이기 때문에 리덕스 사가도 써야한다.

(예를들어 로그인과정을 처리할때,

로그인요청-> 데이터로DB조회후 ..(끝나면)-> 로그인성공 or실패 인데,

리덕스는 동기라서- 바로실행 ,로그인요청후 ( 어떤일들 ) 을처리할수가, 방법이 없음

그래서 리덕스 사가를 쓴다.)

 

 

리덕스 사가 설치

npm i redux-saga

 

 

generator를 사용한다. 

generator는 함수중간에 뭠출수 있고, 원할때 재개할수 있음!

function* generator() {

}

https://aloha2jh.tistory.com/40

generator

 

리덕스 사가 - 기본 세팅방법과 앱에 적용하기

 

1) 루트사가 만들기 !

리덕스가 루트, user, post... 이렇게 있어서 루트에서 합쳐줬던것처럼

사가도 합쳐준다

import { all, call} from 'redux-saga/effects';
import user from './user';
import post from './post';

export default function* rootSaga(){
    yield all([
        call(user),
        call(post),
    ])
}

 

2) 예시로 로그인 액션 만들기

import { all, fork, takeLatest, call, put } from 'redux-saga/effects';

function loginAPI(){ 
	//서버에요청을보내기
}

function* login(){
    try{
        yield call(loginAPI);	//(2)
        yield put({				// 성공시! put (put은 dispatch와 동일.)
            type: LOG_IN_SUCCESS
        })
    }catch(E){
        console.error(e);
        yield put({
            type:LOG_IN_FAILURE
        })
    }
}

function* watchLogin(){
    yield takeLatest(LOG_IN, login);  // (1)
}


export default function* userSaga(){
    yield all([
        fork(watchLogin),
    ]);
}

takeLatest가 LOG_IN액션이 dispatch되길 기다려서 dispatch될 때

login제너레이터를 호출한다.

 

  (1) watchLogin사가가 로그인액션이 들어오는지 기다림

  (2) LOG_IN 이들어오면 loginAPI을 call(서버에 요청을보냄)

 

3) 앱과 사가를 연결(앱의 prop로 사가store를 넘겨주기)

루트사가를 사가미들웨어로 run.

앱미들웨어에 사가미들웨어추가하기

 

...
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas';

...

export default withRedux((initialState, options)=>{
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware];
	...
    sagaMiddleware.run(rootSaga); //
    return (store);
})(DigitalGallery);

리덕스사가에서 제공하는createSagaMiddleware를 사용해

_app.js에 루트사가를 사가middleware에 연결해서

middleares에 사가미들웨어를 추가해준다

 

 

 

 

redux-saga 메서드 설명

https://aloha2jh.tistory.com/41

redux-saga / all, fork, takeLatest, call, put 메서드 설명

 

 

 

 

 

++

 

디버깅 제거

 !options.isServer && window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) =>f,

이코드가 실제production버전에도 들어가게 되면 리덕스디버그툴로 데이터타입같은게 노출되니까,

const enhancer = process.env_NODE_ENV === 'production'
    ? compose(applyMiddleware(...middlewares),)
    : compose(applyMiddleware(...middlewares),
    !options.isServer && window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) =>f,
    );

production일때는 제거

 

 

하이오더 컴포넌트 1

hoc(Component);
const hoc = (Component) => () => {
	<Component some="i'm hoc" />
};

 

props를 넣어줄수있음

 

하이오더 컴포넌트 2

connect( mapStateToProps)(Component)
const connect = (mapStateToProps) => (Component) => {
	<Component props={mapStateToProps()} />
};

기능들을 덮어씌워서 props 를 추가하는것 ..

 

curring기법