React) redux-toolkit

BongHee·2023년 2월 13일
0

React

목록 보기
5/7
post-thumbnail

Redux-toolkit

  • 리덕스 툴킷 사용 이유
  1. 리덕스의 기존 단점이였던, 보일러플레이트 코드가 줄어든다.
    (보일러플레이트란? 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드)
  2. 패키지 의존성을 줄여준다 (redux devtool, immer등 여러 라이브러리를 설치해서 사용했어야 했는데, 툴킷은 설치가 필요없다 내장되어있어서)
  • 리덕스 툴킷에서 가장 중요한 개념인 createSlice를 설명을 하겠습니다.
    -> 액션 타입, 액션 생성 함수, 액션별 리듀서, 취합 파일 등을 하나의 파일로 통합할 수 있게한다.
    -> createSlice에 선언된 슬라이스 이름을 따라 리듀서와 액션 생성자, 액션 타입 자동 생성
import { createSlice } from '@reduxjs/toolkit';

interface InitialState {
  value: boolean;
}

const initialState: InitialState = {
  value: false,
};

const pwdSlice = createSlice({
  name: 'forgotPwd',
  initialState,
  reducers: {
    toggleOn: (state) => {
      state.value = !state.value;
    },
  },
});

export default pwdSlice;
export const { toggleOn } = pwdSlice.actions;

타입스크립트를 사용한 리덕스 툴킷에 createSlice부분이다.
name은 해당 모듈의 이름이다.
initialState를 통해 state의 처음 상태를 정의한다.
reducers에서 액션을 설정한다.
리듀서 함수를 이용해서 value인 불리언값을 토글형식으로 변형하기를 원했다.
toggleOn 함수를 통해서 state.value = !state.value로 state 변경을 하는 코드를 작성했다.

  • store부분의 코드이다.
import { configureStore } from '@reduxjs/toolkit';
import pwdSlice from './pwdSlice';

const store = configureStore({
  reducer: {
    pwdForgot: pwdSlice.reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

타입스크립트로 작성했기 때문에 밑에 타입지정한 걸 볼 수 있다.

import { RootState } from '../../store';
import { toggleOn } from '../../store/pwdSlice';

  //리덕스 툴킷
  const dispatch = useDispatch();
  const pwdState = useSelector((state: RootState) => {
    return state.pwdForgot.value;
  });

  //비밀번호 잊으셨나요 클릭 이벤트
  const onPwdForgotClick = () => {
    dispatch(toggleOn());
  };

리덕스와 비교했을때, 리덕스 툴킷은 코드가 굉장히 간결하다.
이렇게 사용하고자 하는 파일에서 state 변경을 위해 useDispatch와 useSelector()를 사용해주면 된다

profile
배움에 두려움이 없고 개발을 즐기는 사람

0개의 댓글