React-Redux, Redux, Redux-logger, Redux-thunk, Redux-saga

정리

• 리액트에서 하나의 앱에는 하나의 Store가 존재한다.(Vuex와 동일)
• Store의 state는 읽기전용
• 기존 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해줘야한다.
• 리듀서는 이전 상태와 액션 객체를 파라미터로 받고 언제나 새로운 상태의 객체를 만들어서 반환해야한다.
• 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야한다.

 

Redux 주요 기능

• createStore: 리액트 프로젝트에서 스토어를 생성시켜준다.
• combineReducer: 모듈화된 리듀서들을 하나의 리듀서로 통합시켜준다.
• applyMiddleware: 미들웨어를 사용할 수 있게 해준다.

 

React-redux 주요 기능

• Provider: 리액트 앱의 컴포넌트에서 리덕스 스토어에 Hook을 통해 접근가능
• useSelector: 사용중인 store의 state에 접근할 수 있음
• useDispatch: store에 있는 dispatch를 호출할 수 있는 함수가 리턴됨. 이 함수를 통해서 액션을 발생시킴(vuex의 mutatation 과 비슷..)

 

Redux-logger 주요 기능

• 미들웨에에서 일어나는 각종 상태 정보들을 로깅할 수 있다.

 

Redux-thunk 주요 기능

• 리덕스에서 비동기 작업을 처리할 때 주로 사용되는 미들웨어이다.
• 액션 객체가 아닌 함수를 디스패치 할 수 있다.
• 함수를 dispatch할 때에는 해당 함수에서 dispatch, getState를 파라미터로 받아와줘야한다.
• dispatch할 때 함수를 thunk 라고 부른다.

 

Redux-saga 주요 기능

• redux-thunk 다음으로 가장 많이 사용되는 라이브러리
• 함수를 디스패치할 수 있게해주는게 redux-thunk였다면, 
• redux-saga는 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식
•  generator 문법을 기반으로 돌아간다.