일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 리액트컴포넌트
- 리액트기초
- 시퀄라이즈공부
- sequelize
- React
- component
- sementicversion
- 시퀄라이즈
- mongoose
- npm명령어
- 클래스컴포넌트
- NPM
- nodejs교과서
- MongoDB
- express-generator
- 제로초예제
- nodeJS
- node
- React Component
- 리액트
- NoSQL
- mongo
- 리액트스타디
- Today
- Total
개발노트
redux-saga 설치 및 기본 본문
https://aloha2jh.tistory.com/51
비동기인 일을 처리할때 리덕스사가
리덕스가 동기이기 때문에 리덕스 사가도 써야한다.
(예를들어 로그인과정을 처리할때,
로그인요청-> 데이터로DB조회후 ..(끝나면)-> 로그인성공 or실패 인데,
리덕스는 동기라서- 바로실행 ,로그인요청후 ( 어떤일들 ) 을처리할수가, 방법이 없음
그래서 리덕스 사가를 쓴다.)
리덕스 사가 설치
npm i redux-saga
generator를 사용한다.
generator는 함수중간에 뭠출수 있고, 원할때 재개할수 있음!
function* generator() {
}
https://aloha2jh.tistory.com/40
리덕스 사가 - 기본 세팅방법과 앱에 적용하기
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
++
디버깅 제거
!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기법
'React > project' 카테고리의 다른 글
back 세팅 (0) | 2020.08.20 |
---|---|
eslint 추가 (0) | 2020.08.12 |
redux-saga / all, fork, takeLatest, call, put 메서드 설명 (0) | 2020.08.11 |
generator (0) | 2020.08.11 |
React node next 세팅 (0) | 2020.07.14 |