如何編寫Redux Reducer？

Question

我遇到問題了。 我有這個樹形視圖（我的InitialState）。我必須寫一個reducer， ，這個'可見'屬性更新，當我改變它。 例如，當我點擊節點時，我想更新可見屬性。

email: { 
    folderList: [ { 
     name: 'Inbox', 
     isSelected: false, 
     isNested: true, 
     visible: false, 
     folderList: [ { 
       name: 'SubFolder1', 
       isNested: true, 
       visible: false, 
       folderList : [ { 
        name: 'SubFolder2', 
        isNested: true, 
        visible: false, 
        folderList: [ { 
          name: 'SubFolder3', 
          isNested: false, 
          visible: false 
        } ], 
        count: 5 
       } ] 
      }, { 
       name: 'SubFolder1', 
       isNested: false, 
       visible: false 
     } ], 
     icon: 'icon-icon_inbox', 
     count: 44 
    }, { 
     name: 'Outbox', 
     isSelected: false, 
     isNested: false, 
     icon: 'icon-icon_outbox', 
     count: 0, 
     visible: false 
} 

Answer 1

讓這家店看起來像你應該正常化的數據：

{ 
    folders: { 
    1: { 
     name: 'Inbox', 
     ... 
     folderList: [2,3] 
    }, 
    2: { 
     name: 'Folder 1', 
     ... 
     folderList: [6,7] 
    }, 
    3: { 
     name: 'Folder 2', 
     ... 
     folderList: [8,9] 
    }, 
    4: { 
     name: 'Outbox', 
     ... 
    }, 
    ... 
} 

點擊一個節點然後當，你的行動的創建者看起來就像這樣：

folderClicked(folderid) { 
    return { type: 'SELECT_FOLDER', payload: { folderId, visible: true } } 
} 

和你減速器看起來像這樣

const initialState = normalizedListOfFolders; 

export function reducer(state = initialState, action) { 
    switch(action.type) { 
    case 'SELECT_FOLDER': 
    const { folderId, visible } = action.payload; 
    return { ...state, [folderID]: { ...state[folderId], visible: true } } 
    default: 
    return state; 
} 

如果你沒有規範化，你將不得不深入挖掘對象，如反應的不變性助手或immutable.js。