use Reducter로 만든 사용자 정의 훅스

모티프

자세 화면을 만들면usestate가 늘어나 귀찮아요.스프레드시트 구문 사용

const [state, setState] = useState({a: 'a', b: 'b', c: 'c' ........})
const handleClickC = () => setState({...state, c: state.c + 'c'})

같은 글씨도 괜찮지만'...state'를 쓸 때마다 힘들어요.
나는 대부분의 사람들이 이곳에서 use Reducter에 대해 토론할 것이라고 생각한다.
검색하시면 굉장히 잘 팔리는 게...

dispatch({type: '...', action: '...'})

와 같은 쓰기 방법은usestate의 사용 방법을 연장하고 싶어서 아래의 설치로 사용자 정의 훅스에 숨기고 싶습니다.

이루어지다

간단하게 보기 위해서, 우리는 여기에서 좌표를 표시하는 프로그램을 고려한다.
Partial을 사용하여 업데이트할 속성만 지정하면 됩니다.

//pages/index.tsx
type Axis = { x: number; y: number; z: number };
const Index = () => {
  const [{x,　y,　z}, setAxis]= useAxis<Axis>({x: 0, y: 0, z: 0})
  return (
    <>
      <p>x: {x} <button onClick={() => setAxis({x: x + 1})}>+1</button></p>
      <p>y: {y} <button onClick={() => setAxis({y: y + 1})}>+1</button></p>
      <p>z: {z} <button onClick={() => setAxis({z: z + 1})}>+1</button></p>
      <p><button onClick={() => setAxis({x: 1, y: 2, z: 3})}>to (1,2,3)</button></p>
      <p><button onClick={() => setAxis('reset')}>to (0,0,0)</button></p>
    </>
  );
};

// hooks/useAxis.ts
type Action<T extends Object> = Partial<T> | 'reset';

export const useAxis = <T extends Object>(init: T) =>
  useReducer((state: T, action: Action<T>) => {
    if (action === 'reset') return init;
    return { ...state, ...action };
  }, init);

최초

type Action<T extends Object> = 
  | { type: 'update'; action: Partial<T> } 
  | { type: 'reset' };
setAxis({type: 'update', action: {x: 1, y: 2, z: 3}})
setAxis({type: 'reset'})

이지만 뜻밖에'{type:'reset'}'을 쓰는 것이 귀찮아서 이렇게 됐어요.나는 여기에 대해 찬성과 반대 두 가지 의견이 있다고 생각한다.

총결산

실복하면 별거 아닌 것 같지만 상당히 편해요.