[240530 TIL] Action Creator

액션크리에이터

Redux를 활용하여 상태와 액션을 보다 효과적으로 관리하기 위해 커스텀 훅을 만들어보았습니다.
이 훅을 사용하면 Redux 상태와 액션을 컴포넌트에서 간편하게 사용할 수 있습니다.

이 훅에서 사용되는 각 액션 크리에이터 (예: selectMemo, createMemo, deleteMemo, updateMemo)는 Redux에서 일반적으로 Action Creators로 불립니다.

정의:

• Custom Hook: 리액트 훅을 사용하여 재사용 가능한 로직을 캡슐화한 함수. useMemoApp은 커스텀 훅입니다.
• Action Creator: 특정 액션을 생성하여 디스패치하는 함수. 예를 들어, selectMemo, createMemo, deleteMemo, updateMemo가 여기에 해당합니다.

코드 설명:

• useMemoApp 훅은 Redux 상태와 액션을 캡슐화하여 컴포넌트에서 간편하게 사용하도록 합니다.
• useSelector를 사용하여 Redux 상태를 선택합니다.
• useDispatch를 사용하여 액션을 디스패치합니다.
• 각 액션을 생성하는 함수 (selectMemo, createMemo, deleteMemo, updateMemo)를 정의하고 반환합니다.

개선된 코드 예시:

import { AppDispatch, RootState } from "@/redux/store";
import { CREATE, DELETE, SELECT, UPDATE } from "@/types/d";
import { useDispatch, useSelector } from "react-redux";

const useMemoApp = () => {
    const dispatch = useDispatch<AppDispatch>();
    const memos = useSelector((state: RootState) => state.memoApp.memos);
    const selected = useSelector((state: RootState) => state.memoApp.selected);

    const selectMemo = (memoId: string) => dispatch({ type: SELECT, payload: memoId });
    const createMemo = (text: string) => dispatch({ type: CREATE, payload: text });
    const deleteMemo = (memoId: string) => dispatch({ type: DELETE, payload: memoId });
    const updateMemo = (memo: { id: string, contents: string }) => dispatch({ type: UPDATE, payload: memo });

    return {
        memos,
        selected,
        selectMemo,
        createMemo,
        deleteMemo,
        updateMemo,
    };
};

export default useMemoApp;

개선 사항:

1. 타입 정의: updateMemo에서 memo의 타입을 명확히 지정합니다. 여기서는 { id: string, contents: string } 형태로 지정했습니다.
2. 함수 정의: 각 함수 (selectMemo, createMemo, deleteMemo, updateMemo)를 반환하여 컴포넌트에서 사용할 수 있도록 했습니다.

사용 예시:

import React from 'react';
import useMemoApp from '@/hooks/useMemoApp';

const MemoComponent = () => {
    const { memos, selected, selectMemo, createMemo, deleteMemo, updateMemo } = useMemoApp();

    return (
        <div>
            <button onClick={() => createMemo("New Memo")}>Add Memo</button>
            {memos.map(memo => (
                <div key={memo.id}>
                    <p>{memo.contents}</p>
                    <button onClick={() => selectMemo(memo.id)}>Select</button>
                    <button onClick={() => deleteMemo(memo.id)}>Delete</button>
                    <button onClick={() => updateMemo({ id: memo.id, contents: "Updated Content" })}>Update</button>
                </div>
            ))}
        </div>
    );
};

export default MemoComponent;

이 예시에서는 useMemoApp 커스텀 훅을 사용하여 메모 관련 상태와 액션을 쉽게 사용할 수 있습니다. 각 액션 크리에이터 함수는 Redux 상태를 업데이트하는 데 사용됩니다.