API 통신을 이용한 CRUD를 해보겠습니다.
예를 들어 category라는 학년 및 학기를 관리하는 하나의 components를 만들도록 하겠습니다. 파일구조는 제가 부장님에게 배운 방식으로 하다보니 마음에 들지 않는 다면 다른 방식으로 사용하셔도 무방합니다. import만 주의하세요. ^^
1-1. constants.js
먼저, store 폴더 밑에 category라는 폴더를 생성합니다.
그리고, constants.js라는 파일을 생성합니다.
이 파일은 action의 type을 모아둔 파일입니다.
export const CATE_READ = 'CATE_READ';
export const CATE_INSERT = 'CATE_INSERT';
export const CATE_UPDATE = 'CATE_UPDATE';
export const CATE_DELETE = 'CATE_DELETE';
1-2. actions.js
다시 category라는 폴더에 actions.js라는 파일은 생성합니다.
import {CATE_READ, CATE_INSERT, CATE_UPDATE, CATE_DELETE} from "./constants";
export const categoryRead = () => ({
type: CATE_READ,
request: {
url: '/category/list', // 통신을 위한 추가적인 URL
method: 'POST', // 통신 메소드 설정(서버 라우트에서 정한 방식으로 설정합니다.)
},
});
위와 같이 먼저 constants를 import하고 "categoryRead"라는 action을 작성합니다.
1-3. reducers.js
다시 category라는 폴더에 reducers.js라는 파일은 생성합니다.
import {CATE_READ, CATE_INSERT, CATE_UPDATE, CATE_DELETE} from "./constants";
import {success, error} from "redux-saga-requests";
// 초기화
const initialState = {
lists: [],
};
// API 통신으로 돌아온 데이터를 처리하는 부분
export default (state = initialState, action) => {
switch (action.type) {
case success(CATE_READ): {
return {
...state,
lists: action.data.categoryList, // 돌아온 데이터(categoryList)를 lists라는 초기값에 넣음.
}
}
default: {
return {
...state
}
}
}
}
1-4. store.js에 categoryReducer를 추가
반복되는 코드는 작성하지 않도록 하겠습니다.
import categoryReducer from './category/reducers';
export default createStore(
combineReducers({
category: categoryReducer, // 기존 코드에서 변경된 부분
}), composeWithDevTools(
applyMiddleware(sagaMiddleware),
),
);
1-5. Category.js
src 폴더 밑으로 components 폴더 생성하고 ""Category.js"파일을 생성합니다.
그리고, 주석과 같이 읽으시면 되겠습니다.
import React, {Component} from 'react';
import {connect} from "react-redux";
// action은 항상 이렇게 import 해주어야함.
import {categoryRead} from "../store/category/actions";
class Category extends Component {
// render()가 끝나고 실행되는 부분.
componentDidMount() {
this.props.categoryRead(); // 데이터를 불러오는 action(categoryRead)를 실행시킴.
}
render() {
return (
<div>
<table>
<thead>
<tr>
<th>학년</th>
<th>학기</th>
</tr>
</thead>
<tbody>
{/* javascript의 프로토타입 map으로 반복문으로 생각하면 편함. */}
{this.props.lists.map(item => (
<tr key={item.id}>
<td>{item.year}</td>
<td>{item.semester}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
// reducers.js에서 건너온 초기값 모음.
const mapStateToProps = state => ({
lists: state.category.lists,
});
// actions.js에서 건너온 action들 모음.
const mapDispatchToProps = dispatch => ({
categoryRead: () => dispatch(categoryRead()),
});
// 위의 mapStateToProps, mapDispatchToProps의 초기값 및 aciton 들을 class Category에 연결.
export default connect(mapStateToProps, mapDispatchToProps)(Category);
위와 같이 작성하였다면 아래와 같은 사진처럼 실행됩니다.
이상으로 READ를 마치겠습니다.