2017-01-28 70 views
2

我開始將Redux拉入React應用程序,但我無法理解我的'主狀態設計'在哪裏使用。React/Redux:我在哪裏創建+放置'主'應用程序狀態?

對於上下文,我將應用程序狀態視爲一棵巨大的樹,並且我有減少器來照顧樹的一點點。我已經考慮了一下我想如何表示狀態樹,並且我有一個變量initialState,它基本上是一個Immutable.js對象,其中有一堆包含我應用程序狀態各個部分的子對象。

我已經將我的縮減器分成了映射到我的應用程序的這些不同部分,但我無法理解如何創建巨大的主狀態樹。我得到,每個reducer接受整個狀態樹+動作,並根據該動作返回一個新狀態,但如果進入reducer的狀態爲undefined,則不知道將「初始狀態」置於何處。

換句話說:如果最初是未定義的(如果是的話,還原器應該在哪裏生存),是否應該負責創建整個狀態樹?還是應該任何一個reducer分配一個未定義的狀態參數爲initialState變量?

回答

3

如果您使用的是combineReducers,則不必創建「根」。 combineReducers返回的函數本身就是一個簡化器,它會自動爲你傳遞的每個reducer的「分支」(屬性)創建你的狀態樹的根。你的簡化器只需要擔心初始化他們自己的分支一個初始狀態。

如果你不使用combineReducers,我認爲每個reducer仍應該只擔心它所作用的狀態樹部分。將其轉換爲單個「主」減速器將無用地拆分相關代碼,從而使得您的應用難以推理。

+0

哈!真!我沒有選擇第一次閱讀文檔。謝謝! –

0

official guide中的示例所示可以使用作爲初始狀態的減速器的第一個參數的默認值。

function todoApp(state = initialState, action) { 
    switch (action.type) { 
    case SET_VISIBILITY_FILTER: 
     return Object.assign({}, state, { 
     visibilityFilter: action.filter 
     }) 
    case ADD_TODO: 
     return Object.assign({}, state, { 
     todos: [ 
      ...state.todos, 
      { 
      text: action.text, 
      completed: false 
      } 
     ] 
     })  
    default: 
     return state 
    } 
} 

該初始狀態可以是硬編碼在客戶端代碼中的默認值。或者它可以是由服務器引導到HTML頁面的一些數據。例如在服務器渲染的EJS模板,你可以有:

<script> 
window.INITIAL_STATE = <%= JSON.stringify(initialState) %> 
</script> 
+0

啊,對 - 我明白如果狀態是未定義的,狀態可以作爲參數放置,但是我的問題更多的是如果每次都必須讓'initialState'成爲巨樹。在文檔中有一個像todo示例這樣的小應用程序是很好的,但是當我想要定義一個新的應用程序時,我不想將所有狀態都傳遞給每個reducer。 –

+0

分支的縮減器的initialState將只是該分支的初始狀態,而不是整個狀態樹。 – lorefnon

相關問題