嵌套狀態以減少通過的道具數量

Question

比方說，我有一個很大的組件，需要state中的10個不同的值。

我可以把它分割成更小的組件，以提高可讀性，雖然我不除重用任何其他地方的部分組成 - 他們仍然是太具體，因爲他們需要知道太多關於國家是有用的。

因此，我將至少6個不同的道具傳遞給每個子組件。所以，當我通過縮小組件來提高可讀性時，同時，通過爲每個子組件傳遞太多道具來使可讀性更差。

所以我想着如何解決這個問題的不同方法。

1.

組狀態爲一個值來移動它周圍容易

例如而不是

{ 
    a: 1, 
    b: 2, 
    c: 3 
} 

其存儲爲

{ 
    abc: { 
    a: 1, 
    b: 2, 
    c: 3 
    } 
} 

然後傳遞給孩子的組件作爲一個道具。

2.

由於我的子組件是無狀態的，只是通過狀態<Child {...this.state} />。

使用終極版，並通過store，不過，我可能是錯的，但我認爲，依靠store.getState會變成我的簡單的子組件到容器（在終極版而言）。

道歉，如果這個問題太泛化。

Answer 1

如果您想堅持使用組件的狀態與Redux，選項2可以使用。

就我個人而言，我會使用Redux和映射狀態到最父組件上的道具，使得這個唯一的容器。然後你可以將prop值降低到子組件：

<Child {...this.props.exampleProp} />