如何编写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。