[Frontend] React를 이용해 API 배열 형태로 데이터 던져주기

데이터를 배열 형태로 API에 보내줘야 하는 요구사항을 프론트엔드에서 처리하는 방법입니다.

API URL, 매개변수, 변수 명은 모두 블로그 예시용으로 수정한 것입니다.
실무에서는 더 직관적이고 명확하게 작성하고 있습니다.

백단의 요구사항

1. API URL : api/event/something
2. 뿌려줘야 할, 던져줘야 할 또는 파싱해야 할 등등의 정보를 백단에서 알려주겠죠.
   지금의 경우는 아래와 같은 포맷으로 데이터를 던져줘야 합니다.
3. 해당 형식으로 데이터를 던지고 리턴값이 true면 정상 작동, false면 장애 처리

[
	{		
		"id": 12,
		"createDate": 20210305
	},
	{
		"eventId": 23,
		"createDate": 20210404
	},
	{
		"eventId": 25,
		"createDate": 20210404
	}
]

 

React & Redux

Action

파싱해야 할 매개변수를 선언합니다.

export const postEventData = (data) => (dispatch, getState) => { 

const { createDate, eventId } = data;
const url = `https://1.1.1.1:api/event/something`; 

const params = {};
const postData = {};
const cancelTokenId = DUPLICATE_MODAL_TEMPLATE_SUCCESS;

const request = service.post({ url, params, data: postData, cancelTokenId});

request.then(response => {

dispatch({ type: POST_EVENT_DATA_SUCCESS, payload: response });

}).catch(error => {

dispatch({ type: POST_EVENT_DATA_FAIL, payload: {} });

});

}

Reducer

let init = {
  eventData: true,
  eventDataLoading: false,
}

case POST_EVENT_DATA_SUCCESS:
            data = (action.payload && action.payload.data) ? { success: action.payload.data } : { success: false };
            return Object.assign({}, state, {
                eventData: data,
            });
case POST_EVENT_DATA_FAIL:
            data = { success: false };
            return Object.assign({}, state, {
                eventData: data,
            });
case POST_EVENT_DATA_LOADING:
            data = action.payload || false;
            return Object.assign({}, state, {
                eventDataLoading: data,
            });

JS

const handleExecuteButtonClick = () => {
    const { postEventData  } = this.props;


    const data = selectedData.map(item => {
      return (
        eventId: item.eventId
        createDate: item.createDate,
      )
    })

    postEventData (data);
  }

let mapDispatchToProps = dispatch => {
    return {
        postEventData : (params) => dispatch(postEventData (params))
    }
}

 

배열로 던져줘야 하는 작업은 처음이라 고민했던 부분입니다. 화이팅~!

const data = selectedData.map(item => {
      return (
        eventId: item.eventId
        createDate: item.createDate,
      )
})