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

in zzan •  2 months ago 

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

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);
    }
  }));


오늘 수업 끝.




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

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


vote, reblog, follow @anpigon

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

I have you full 100% Upvote like 6+ NEOXAG but can you explain in layman terms, so everyday people can understand what your post is about?

it sounds important, does it have something to do with the need to change API after steem chain froze up after recent hardfork problem?

Thank you. but this post is not about steem chain.
It is just personal blog.

곰돌이가 @anpigon님의 소중한 댓글에 $0.033을 보팅해서 $0.007을 살려드리고 가요. 곰돌이가 지금까지 총 6384번 $71.146을 보팅해서 $82.383을 구했습니다. @gomdory 곰도뤼~

Congratulations @anpigon! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You published a post every day of the week

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Vote for @Steemitboard as a witness to get one more award and increased upvotes!