0%

[React] Mobx-state-tree 학습하기 #16 : Use Volatile State and Lifecycle Methods to Manage Private State

이전글 "[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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const User = types
.model({
// (...)
})
.actions(self => ({
// (...)
.actions(self => ({
getSuggestions: flow(function* getSuggestions() {
// (...)
}),
save: flow(function* save() {
// (...)
}),

// 다음 액션 추가
afterCreate() {
onSnapshot(self, self.save);

}));


오늘 수업 끝.



댓글, 팔로우, 좋아요 해 주시는 모든 분께 감사합니다.

항상 행복한 하루 보내시길 바랍니다.


vote, reblog, follow @anpigon

Originally posted on http://steemit.com