초보자의 React.js (6) - CRUD[DELETE]

1-1. constants.js는 3편에서 이미 모두 작성했습니다.

1-2. actions.js 추가 부분

export const categoryDelete = (id) => ({
    type: CATE_DELETE,
    request: {
        url: '/category/destroy',
        method: 'POST',
        data: {id: id}
    }
});

1-3. reducers.js 추가 부분

case success(CATE_DELETE): {
            alert(action.data.message);
            return {
                ...state,
                lists: state.lists.filter(item => item.id !== action.data.id)
            };
        }

        case error(CATE_DELETE): {
            alert(action.error.data.message);
            return {
                ...state,
            };
        }

error(CATE_DELETE)의 경우는 이 데이터에 연관된 데이터가 있을 시 그에 대한 처리를 위해 만들어두었습니다.

1-4. Category.js 추가 부분

// import
import {categoryRead, categoryInsert, categoryUpdate, categoryDelete} from "../store/category/actions";

// render 중 button 부분에 추가
<button onClick={function () {
                        this.props.categoryDelete(this.state.id);
                    }.bind(this)}>DELETE
                    </button>

// action
const mapDispatchToProps = dispatch => ({
    categoryRead: () => dispatch(categoryRead()),
    categoryInsert: (year, semester) => dispatch(categoryInsert(year, semester)),
    categoryUpdate: (id, year, semester) => dispatch(categoryUpdate(id, year, semester)),
    categoryDelete: (id) => dispatch(categoryDelete(id)),
});

위와 같은 방식으로 삭제가 진행됩니다.

이상으로 초보자의 "react.js 활용기"였습니다.

감사합니다.