Redux로 전역상태 관리하기

 

Redux?

전역 상태 관리를 위한 라이브러리

모든 상태를 하나의 중앙 저장소(Store)에서 관리한다.

 

복잡한 데이터 흐름이나 상태 관리가 필요할 때 사용하면 좋다.

​

 

Redux 데이터 흐름

=> FLUX 패턴

출처: 오즈코딩스쿨 리액트 강의

 

Counter 예시

 

+,-버튼이 있는 counter인데 UI에서 +버튼을 누르면

{ type: 'INCREMENT' } 문자열을 담은 Action 객체가 만들어진다.

 

출처: 오즈코딩스쿨 리액트 강의

만들어진 Action 객체는 Dispatch()로 전달되고

출처: 오즈코딩스쿨 리액트 강의

이 Dispatch()는 Reducer()로 Action 객체를 전달을 해준다.

 

Reducer는 Action 안에 있는 값을 해석해

Store에 담긴 상태를 업데이트한다.

출처: 오즈코딩스쿨 리액트 강의

 

변경된 상태에 맞춰 UI가 리렌더링 된다.

 

 

 

Action

상태를 어떻게 변화시킬 것인지

내용이 담겨있는 객체

 

액션 객체

{
  type: 'INCREMEMT'
  payload: 5
}

 

액션 생성자

const increment = (num) => ({
  type: 'INCREMEMT'
  payload: num
})

 

 

Dispatch

Action 객체를

Reducer로 넘겨주는 역할을 하는 함수

 

액션 객체

dispatch({
  type: 'INCREMEMT'
  payload: 5
})

 

액션 생성자

dispatch(increment(5))

 

 

Reducer

리턴하는 값이 새로운 상태가 되는 함수

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMEMT':
      return state + action.payload
    case 'DECREMEMT':
      return state - action.payload

    // 기본값 유지
    default:             
      return state
  }
}

 

 

Reducer가 여러 개면?

 

combineReducers()로

묶어서 하나로 만들 수 있음

const rootReducer = combineReducers({
  counterReducer, anyReducer, ...
})

 

 

Store

Redux의 전역 상태 저장소

 

createStore()에 Reducer를 전달해서 생성

const store = createStore(rootReducer)

 

 

 

구성 요소를 다 만든 후

React-Redux에서 제공하는 기능을 사용한다.

 

App과 전역 상태 저장소 연결

=> <Provider store={ store }>

 

상태 저장소에서 상태 꺼내서 사용

=> useSelector()

 

dispatch() 만들어서 사용

=> useDispatch()

 

 

 

Redux-Thunk?

 

Action으로 객체 말고도 함수를 사용할 수 있게 해주면서

Redux에서 비동기 처리를 할 수 있게 해주는 미들웨어

 

 

설치 방법

npm install redux-thunk

 

사용 방법

applyMiddleware(thunk)를 사용하여 redux-thunk를 Store에 적용

const store = createStore(rootReducer, applyMiddleware(thunk))

 

createStore 함수를 사용하여 스토어를 생성

 

store의

첫 번째 인자로 스토어의 상태를 관리할 Reducer를 가졌다면,

 

두 번째 인자로 redux-thunk 미들웨어를 스토어에 적용한다.

applyMiddleware를 가져와서

redux-thunk의 thunk를 applyMiddleware의 인자로 전달해 준다.