分型的 「正常化」 終極版狀態形狀

Question

Redux的最佳實踐建議您normalize your state shape

基本上這意味着以下幾點：

const blogPosts = [ 
    { 
     id : "post1", 
     author : {username : "user1", name : "User 1"}, 
     body : "......", 
     comments : [ 
      { 
       id : "comment1", 
       author : {username : "user2", name : "User 2"}, 
       comment : ".....", 
      }, 
      { 
       id : "comment2", 
       author : {username : "user3", name : "User 3"}, 
       comment : ".....", 
      } 
     ]  
    }, 
    { 
     id : "post2", 
     author : {username : "user2", name : "User 2"}, 
     body : "......", 
     comments : [ 
      { 
       id : "comment3", 
       author : {username : "user3", name : "User 3"}, 
       comment : ".....", 
      }, 
      { 
       id : "comment4", 
       author : {username : "user1", name : "User 1"}, 
       comment : ".....", 
      }, 
      { 
       id : "comment5", 
       author : {username : "user3", name : "User 3"}, 
       comment : ".....", 
      } 
     ]  
    } 
    // and repeat many times 
] 

應存放這樣的：

{ 
    posts : { 
     byId : { 
      "post1" : { 
       id : "post1", 
       author : "user1", 
       body : "......", 
       comments : ["comment1", "comment2"]  
      }, 
      "post2" : { 
       id : "post2", 
       author : "user2", 
       body : "......", 
       comments : ["comment3", "comment4", "comment5"]  
      } 
     } 
     allIds : ["post1", "post2"] 
    }, 
    comments : { 
     byId : { 
      "comment1" : { 
       id : "comment1", 
       author : "user2", 
       comment : ".....", 
      }, 
      "comment2" : { 
       id : "comment2", 
       author : "user3", 
       comment : ".....", 
      }, 
      "comment3" : { 
       id : "comment3", 
       author : "user3", 
       comment : ".....", 
      }, 
      "comment4" : { 
       id : "comment4", 
       author : "user1", 
       comment : ".....", 
      }, 
      "comment5" : { 
       id : "comment5", 
       author : "user3", 
       comment : ".....", 
      }, 
     }, 
     allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"] 
    }, 
    users : { 
     byId : { 
      "user1" : { 
       username : "user1", 
       name : "User 1", 
      } 
      "user2" : { 
       username : "user2", 
       name : "User 2", 
      } 
      "user3" : { 
       username : "user3", 
       name : "User 3", 
      } 
     }, 
     allIds : ["user1", "user2", "user3"] 
    } 
} 

由於該鍵是一個獨特的Id，打字稿要每個鍵基本上屬性（例如：comment1,comment2）...

那麼鍵入上述數據結構的最好方法是什麼？

Answer 1

鍵是字符串，所以您可以定義類型爲對象類型，就像這樣：

interface NormalizedObjects<T> { 
    byId: { [id: string]: T }; 
    allIds: string[]; 
} 

interface ReduxState { 
    posts: NormalizedObjects<Post>; 
    comments: NormalizedObjects<Comment>; 
    users: NormalizedObjects<User>; 
}