TIL(10)리덕스 미들웨어, mapStateToProps

1. 미들웨어(logger, thunk)

2. mapStateToProps, mapStateToDispatch

 

1. 미들웨어(logger, thunk)

 

미들웨어란?

액션을 디스패치 했을 때 호출된 액션을 처리하려는 리듀서와 디스패치 사이의 어떤 작업을 말함
보통은 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때로
예를 들어서 리액트 앱에서 우리가 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리한다.

1-2. logger 와 thunk

import { applyMiddleware, combineReducers, createStore } from "redux"
import { subscribersReducer } from "./subscribers/reducer"
import { addViewReducer } from "./views/reducer"
import { AlubmReducer } from "./album/reducer"
import { composeWithDevTools } from "redux-devtools-extension"
import { logger } from "redux-logger"
import thunk from "redux-thunk"

// combineReducers 으로 여러개의 리듀서를 묶어준다.
const rootReducer = combineReducers({
  view: addViewReducer,
  subscriber: subscribersReducer,
  album: AlubmReducer,
})

//미들웨어 종류 state를 변화를 console 에 기록해주는 logger
const middleware = [logger, thunk]

// 스프레드 연산자를 통한 미들웨어 전부 부르기
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middleware))
)

export default store

 

logger 미들웨어의 기능

1-2 redux-thunk란 ?

thunk 미들웨어는 객체가 아니라 함수를 반환하는 액션 생성자를 만들 수 있게 해줍니다.

특정 액션을 몇 초 후에 실행하거나, 현재 상태에 따라 액션이 실행되지 않게 할 수 있습니다.

비동기 작업을 사용 할때 가장 기본적인 방법입니다. 

dispatch 와 getState() 를 가지고 있습니다.

dispatch의 생성 액션 를 호출 하고 있다.

---

mapStateToProps, mapStateToDispatch

 

mapStateToProps 

state 의 값을 props 로 쓸 수 있게 해줌,