Redux 공부하기

들어가며

Velopert의 모던 리액트를 읽으면서 알게 된 중요한 내용들을 정리해본다. 1월에 하기로 한 프로젝트에 리덕스를 도입할 것인지 말지를 결정하기 위해 빠르게 공부해보기로 했다.

6장 리덕스

• 리덕스의 흐름은 아래와 같이 진행된다.
  1. createStore에 reducer함수를 넣어서 store를 만드는 것으로 전역 상태를 관리한다.
  2. reducer함수는 state와 action을 입력받고, action의 타입에 따라 state를 불변성을 지키며 갱신한다.
  3. reducer를 위해 초기 State, action type(문자열), action 생성함수를 정해주어야 한다.
  4. action 생성함수는 dispatch를 깔끔하게 하기 위함이고.. (store.dispatch(액션생성함수)의 형식으로 쓴다) 기본적으로 디스패치 형식은 리액트의 useReducer와 같다. 단, store를 기준으로 dispatch를 한다.
  5. store.subscribe(callback)을 하면 상태가 변경될 때마다 전달된 콜백을 호출한다. 참고로, 이 함수는 함수를 반환하는데 그 수를 unsubscribe같은 변수로 받고 호출해주면 구독이 해제된다.
• Ducks 패턴 - 리듀서와 액션 관련 코드를 하나의 파일에 몰아서 작성.
  • 액션 타입에 count/increase .. todos/ADD_TODO 처럼 어떤 모듈의 액션인지 구분하여 관리하자.
• combine리듀서를 이용해서 여러 리듀서를 합쳐서 관리할 수 있다.
• 리액트 프로젝트에 리덕스를 적용 시 react-redux에서 Provider를 가져오고, Provider의 store props 값으로 만들어둔 store를 넣는다.
• 프리젠테이셔널 컴포넌트 : store에 직접 접근하지 않고 액션 생성함수만 이용
• useSelector로 sotre에 접근 후 destructing을 통해서 각 상태에 접근할 수 있다.
• useDispatch는 리덕스 스토어에 있는 디스패치 함수(store.dispatch)를 바로 쓸 수 있도록 해준다. useDispatch()(increase()); 같이 스토어에 있는 액션생성함수를 호출할 수 있도록 징검다리가 된다. 보통 useDispatch()를 dispatch로 받아서 쓴다.
• 크롬익스텐션에 redux-devtools-extension을 설치하고 store를 만들 때 composeWithDevTools를 같이 인자로 넣어주면 개발자 도구에서 상태를 확인할 수 있다.
• useSelector의 최적화: useSelector에서 구조분해할당으로 state를 받아오면 state가 무조건 리렌더링된다. 이를 방지하기 위해서는 useSelector를 여러 번 사용해서 각각 받아오거나, shallowEqual로 1차 깊이에서 같으면 리렌더링하지 않도록 해야 한다.
• HOC는 컴포넌트 -> 컴포넌트인 함수이다.
• connect 함수 : useSelector와 useDispatch 때문에 현재는 쓰이지 않음.
  • mapStateToProps : 스토어의 상태 조회, store의 상태값을 읽어서 props로 넣어줌
    • ownProps를 두 번째 인자로 사용할 수 있는데 이는 enhance에 전달되는 props말고 해당 컴포넌트에 직접 넣어주는 props 객체를 의미한다.
  • mapDispatchToProps : 스토어의 액션생성함수처럼, dispatch하는 함수를 만들고 props로 넘김.
  • 위 두 함수를 connect함수에 인자로 넣고, enhance로 받아온 뒤 props로 전달하고 싶은 컨테이너를 감싸면 된다.
  • 그러면 enhance 가 container에 props로 state와 dispatch를 전달하고, container는 상태를 받아오고 presenter가 렌더링 로직을 맡는다.
  • mapDispatchToProps에서 bindActionCreators를 이용하면 한 번에 객체 형태 - 구조분해할당으로 store에서 dispatch한 상태의 함수를 받아올 수 있다.
  • mapStateToProps, mapDispatchToProps 대신 익명함수를 사용할 수도 있다.

7장 리덕스 미들웨어

• 미들웨어에는 store => next => action을 넣고, next를 재귀호출처럼 생각해서 next의 전과 후로 코드를 작성한다.
• next 전에서 action 조작, next에 넣어주기, next 후 조작이 가능하다.
• 리덕스 로거를 이용하면 액션을 출력할 수 있다. createStore에 applyMiddleware로 감싸서 넣어준다.
• redux thunk를 이용하면 함수를 dispatch할 수 있다. thunk는 dispatch와 getState를 파라미터로 받아온다.

  const thunk = store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action)

• thunk는 미들웨어의 일종인데, 위 예시의 경우 함수인 액션이 들어오면 아래처럼 커링 패턴으로 store.dispatch와 store.getState를 추가 입력받아서 dispatch를 할 수 있다. thunk를 한 마디로 줄이자면... action to action인 미들웨어이다.

  const myThunk = () => (dispatch, getState) => {
  dispatch({ type: 'HELLO' });
  dispatch({ type: 'BYE' });
  }
  dispatch(myThunk());