이전글 "[React] Mobx-state-tree 학습하기 #15 : Use Volatile State and Lifecycle Methods to Manage Private State"에서 이어지는 내용입니다. 참고로 이 포스팅은 제가 학습한 내용을 노트에 정리하듯이 기록하여 올리는 글이기 때문에 보팅 안해주셔서 됩니다. 많은 분들이 코딩에 흥미를 느꼈으면 좋겠습니다. ㅋ
Use Volatile State and Lifecycle Methods to Manage Private State
- 강의 링크: https://egghead.io/lessons/react-automatically-send-changes-to-the-server-by-using-onsnapshot
16번째 레슨입니다. Let's make sure our changes get persisted. We will use the window.fetch api to store our changes in the json-server. And onSnapshot to do this automatically
Group.js를 수정합니다. User에 새로운 액션 save를 추가합니다. 이 액션은 async 이므로 flow를 사용합니다. 고유한 ID ${self.id}로 User를 저장하는 API를 호출합니다.
src/models/Group.js
export const User = types
.model({
// (...)
})
.actions(self => ({
getSuggestions: flow(function* getSuggestions() {
// (...)
}),
// save 액션 추가
save: flow(function* save() {
try {
yield window.fetch(`http://localhost:3001/users/${self.id}`, {
method: "PUT",
headers: { "content-type": "application/json" },
body: JSON.stringify(getSnapshot(self))
});
} catch (e) {
console.error("Uh oh, failed to save: " + e);
}
})
}));
그 다음은 save액션을 언제 호출해야할지 고민해야합니다. 하지만 간단하게 할 수 있는 방법이 있습니다.
afterCreate와 onSnapshot를 사용하여, 인스턴스 생성 후, 이 인스턴스에서 새 스냅샷이 생성될 때마다 리스닝합니다. 그리고 새로운 스냅샷이 생성 될 때 save 액션을 실행합니다. 이제 User 인스턴스가 변경 될 때마다 서버로 데이터를 보낼 것 입니다.
src/models/Group.js
export const User = types
.model({
// (...)
})
.actions(self => ({
// (...)
.actions(self => ({
getSuggestions: flow(function* getSuggestions() {
// (...)
}),
save: flow(function* save() {
// (...)
}),
// 다음 액션 추가
afterCreate() {
onSnapshot(self, self.save);
}
}));
오늘 수업 끝.
댓글, 팔로우, 좋아요 해 주시는 모든 분께 감사합니다.
항상 행복한 하루 보내시길 바랍니다.
