useReducer를 사용할 때 작업을 단순화하기 위해 패키지를 만듭니다.

useReducer를 사용하여 복잡한 상태를 처리하는 것이 useState를 사용하는 것보다 바람직합니다. 그러나 리듀서를 작성하는 것은 처리할 작업을 결정하기 위해 너무 많은switch/case 작성해야 할 수 있기 때문에 다소 성가신 일입니다. 또한 액션을 직접 작성하는 대신 액션 생성자를 작성하여 액션을 생성하는 것을 선호할 수 있습니다.

이러한 문제를 해결하기 위해 작업을 단순화하기 위해 use-case-reducers이라는 패키지를 작성합니다.

이 패키지의 특징

Use an object to generate a reducer

Automatically generate action creators

Allow mutating state in case reducer

객체를 사용하여 리듀서 생성

리듀서 함수를 작성하는 대신 유스 케이스 리듀서는 케이스 리듀서를 포함하는 객체를 사용하여 리듀서를 생성합니다. 케이스 리듀서는 하나의 케이스만 처리하는 함수입니다. 예를 들어 increment 및 add 두 가지 작업으로 카운터 상태를 처리하려는 경우 개체는 다음과 같습니다.

const caseReducers = {
  increment: state => ({count: state + 1}),
  add: (state, amount) => ({count: state + amount}),
}

액션 크리에이터 자동 생성

use-case-reducers는 전달한 케이스 리듀서에 해당하는 모든 작업 생성자를 생성합니다. 예를 들어 위의 caseReducers를 사용하면 두 개의 작업 생성자increment() 및 add(amount)가 생성됩니다.

케이스 리듀서에서 상태 변경 허용

이 패키지는 생성된 리듀서에서 immer를 사용하므로 케이스 리듀서 내부의 상태를 변경할 수 있습니다. 위의 caseReducers를 다음과 같이 다시 작성할 수 있습니다.

const caseReducers = {
  increment: state => {state.count += 1},
  add: (state, amount) => {state.count += amount},
}

이 기능은 상태가 매우 복잡할 때 유용할 수 있습니다.

이 패키지를 사용하는 방법

npm 또는 yarn를 사용하여 종속 항목으로 설치합니다.

npm install use-case-reducers
#or
yarn add use-case-reducers

카운터 상태가 있는 구성 요소를 작성하고 이 패키지를 사용하여 업데이트할 것입니다.

import useCaseReducers from 'use-case-reducers'

const initialState = {count: 0};
const caseReducers = {
  increment: (state) => {state.count += 1},
  add: (state, amount) => {state.count += amount},
};

const Counter = () => {
  const [state, dispatch, {increment, add}] = useCaseReducers(caseReducers, initialState);

  return (
    <div>
      count: {state.count}
      <button onClick={() => dispatch(increment())}>increment</button>
      <button onClick={() => dispatch(add(10))}>add 10</button>
    </div>
  )
}

동일한 구성 요소를 살펴보고 useReducer로 작성해 보겠습니다.

import {useReducer} from 'react'

const initialState = {count: 0};
const reducer = (state, action) => {
  switch(action.type) {
    'increment': {
      return {count: state.count + 1};
    }
    'add': {
      return {count: state.count + action.payload};
    }
  }
}

const increment = () => ({type: 'increment'});
const add = (amount) => ({type: 'add', payload: amount});

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      count: {state.count}
      <button onClick={() => dispatch(increment())}>increment</button>
      <button onClick={() => dispatch(add(10))}>add 10</button>
    </div>
  )
}

보시다시피 use-case-reducers 로 더 적은 코드를 작성할 수 있습니다. 이 패키지가 도움이 되기를 바랍니다. 좋은 하루 보내세요!