react-redux의 hooks로 전역 상태 관리하기

kimu2370·2020년 5월 3일
0
post-thumbnail

이전에 리덕스를 사용할 당시 mapStateToProps함수를 정의하고
connect함수로 컴포넌트를 감싸고, 맵핑하는 함수에서 지정한 Redux store의 액션 생성 함수를 props로 전달하는 Higher Order Component(HOC)를 구현해야 했다.
이번엔 react-redux 라이브러리의 hooks를 이용하여 좀 더 간단하게 상태를 관리해보자. 간단하게 카운터로 예를 들어보겠다.
(실제 redux를 사용해야 될 경우는 더 복잡한 구조를 가질 것이다.)

폴더 구조

설정

먼저 최상위 App 컴포넌트를 Provider로 감싼 형태로 만들어준다.
store를 props으로 내려준다.
src/index.js

<App/> 컴포넌트이다. styling은 styled-components를 적용했다.

그런 다음 redux/actionsredux/reducers를 정의한다.

//redux/actions/index.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

export const increment = (count) => {
  return {
    type: INCREMENT,
    payload: count + 1,
  };
};

export const decrement = (count) => {
  return {
    type: DECREMENT,
    payload: count - 1,
  };
};
// redux/reducers/index.js

import { INCREMENT, DECREMENT } from "../actions";
import { combineReducers } from "redux";

const initState = {
  value: 0,
};

const counter = (state = initState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, value: action.payload };
    case DECREMENT:
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

const rootReducer = combineReducers({ counter });

export default rootReducer;

combineReducers는 여러개의 리듀서를 결합해주는 메서드이다.

combineReducers({ 
  counter,
  ...
  etc
});

마지막으로 store가 필요한 컴포넌트에 해당 actionsuseSelector , useDispatch hooks를 사용해주면 된다.

useSelector(), useDispatch()

  • useSelector()
    이 hook은 리덕스 스토어의 상태에 접근할 수 있다.

    const result: any = useSelector(selector: Function, equalityFn?: Function)

    여기서 두번째 파라미터로 오는 equalityFn은 이전값과 다음값을 비교하여 true이면 랜더링하지 않고, false이면 리랜더합니다.
    자세한 내용은 useSelector 최적화하는 3가지 방법을 참고해주세요.

  • useDispatch()
    이 훅은 기존에 props로 액션 생성 함수를 사용하는 것처럼 액션 객체를 dispatch해준다.

     const dispatch = useDispatch()

위 코드에서 count 변수를 콘솔로그로 출력한 결과이다.


Reference

profile
DO WHAT YOU LOVE

2개의 댓글

comment-user-thumbnail
2020년 5월 3일

useSelector랑 useDispatch 처음 보는 훅인데 다음 번에 좀 더 자세히 설명해주시면 좋을거 같아요!

1개의 답글