什麼是在React Redux應用程序中規範狀態的例子？

我正在閱讀Redux Reducers docs，並沒有得到如何正常狀態的工作。在這個例子中的當前狀態是這樣的：什麼是在React Redux應用程序中規範狀態的例子？

{ 
    visibilityFilter: 'SHOW_ALL', 
    todos: [ 
    { 
     text: 'Consider using Redux', 
     completed: true, 
    }, 
    { 
     text: 'Keep all state in a single tree', 
     completed: false 
    } 
    ] 
}

你能提供一個上面的例子嗎？

對於例如，保持todosById：{ID - >待辦事項}和待辦事項：數組中狀態會在真正的應用程序更好的想法，但我們保持例子簡單。

來源

2016-08-17 mangocaptain

這個例子是直接從Normalizr。

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}]

可以歸這個way-

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
}

什麼是標準化的優勢？

你可以提取你想要的狀態樹的確切部分。

例如 - 您有一個包含有關文章信息的對象數組。如果你想從數組中選擇一個特定的對象，你必須遍歷整個數組。最糟糕的情況是所需的對象不在數組中。爲了克服這個問題，我們對數據進行標準化。

要正常化數據，請將每個對象的唯一標識符存儲在單獨的數組中。我們稱這個數組爲results。

result: [1, 2, 3 ..]

和對象陣列轉換成與鍵作爲id的對象（見第二片段）。將該對象稱爲entities。

最終，要訪問與id 1的對象，只需執行此操作即可 - entities.articles["1"]。

來源

2016-08-17 08:57:58 Mihir

爲什麼結果數組仍然需要？對我來說，規範化只是將數據結構從數組更改爲散列，以便更快地查找，但它仍然是嵌套的。我看不出它是多麼平坦 – mangocaptain

@mangocaptain你可以深入一層並且規範化這些數據！該數組需要重現對象的原始數組。例如。 'results.map（id => entities.articles [id]）'將返回原始數組對象。這是單獨數組的一種用例。 – Mihir

@mangocaptain如果用戶希望從UI中刪除一些元素，只需從'results'數組中刪除這些元素即可。這將觸發React中的重新渲染。在重新渲染時，'results.map（id => entities.articles [id]）'會產生更新的數據。原諒我，如果我對你沒有任何意義。但是如果使用React + Redux構建一些示例項目，則會更好理解。 – Mihir

您可以使用normalizr。

Normalizr獲取JSON和模式，並用它們的ID替換嵌套實體，收集字典中的所有實體。

例如，

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}]

可以被歸一化到

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
}

來源

2016-08-17 08:55:07

什麼是在React Redux應用程序中規範狀態的例子？

回答

相關問題