Написать действие и редуктор эффективные и экологически чистые (реагирует Redux)

Question

меня ниже действий и редуктора:

действие:

import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes'; 

export function openNode(path) { 
    return { 
    type: OPEN_NODE, 
    path: path 
    }; 
} 

export function closeNode() { 
    return { 
    type: CLOSE_NODE 
    }; 
} 


export function getNodes(path) { 
    return { 
    type: GET_NODES, 
    path: path 
    }; 
} 

редуктор:

export default function opener(state = initialState, action) { 
    switch (action.type) { 
    case OPEN_NODE: 
    var { path } = action 
    var {nodes} = getFileList(path) 
    return { 
     ...state, 
     open:true, 
     nodes:nodes 
    }; 
    case CLOSE_NODE: 
    return { 
     ...state, 
     open:false 
    }; 
    case GET_NODES: 
    var { path } = action 
    var {nodes} = getFileList(path) 
    return { 
     ...state, 
     nodes:nodes 
    }; 
    default: 
    return state; 
    } 
} 

Очевидно, OPEN_NODE содержат GET_NODES (только плюс open:true), но существует много способов организовать код:

1. pack GET_NODES редуктор к функции, позвоните по телефону OPEN_NODE и добавьте open:true.

2. изменить openNode действие, отправить [OPEN_NODE, GET_NODES] вместе, но как написать switch(action.type) 's case?

3. позволяют OPEN_NODE редуктор направить getNodes действие, чтобы вызвать GET_NODES редуктор

, который лучше всего? Или любой другой лучший способ?

Answer 1

Вы можете просто использовать оператор переключения выполнить оба действия:

export default function opener(state = initialState, action) { 
    switch (action.type) { 
    case OPEN_NODE: 
    case GET_NODES: 
    var { path } = action 
    var {nodes} = getFileList(path) 
    return { 
     ...state, 
     nodes:nodes 
     open: action.type === OPEN_NODE ? true : state.open 
    }; 
    case CLOSE_NODE: 
    return { 
     ...state, 
     open:false 
    }; 
    default: 
    return state; 
    } 
} 

Answer 2

Вы не должны держать все внутри вашего переключателя заявление. Если у вас есть 2 похожих действия, просто перейдите в частную функцию и вызовите ее.

В вашем случае, это может быть что-то вроде:

// your reducer helper 
const getNodes = (state) => { 
var { path } = action 
var {nodes} = getFileList(path) 
return { 
    ...state, 
    nodes:nodes 
}; 
}; 

// your reducer function 
export default function opener(state = initialState, action) { 
    switch (action.type) { 
    case OPEN_NODE: 
    return { ...getNodes(state), open:true }; 
    case GET_NODES: 
    return getNodes(state); 
    // .... 
}