React Redux dispatch 2 actions basées sur la condition

Question

J'essaie de changer l'événement store (addList) et de vérifier si c'est la première liste un tableau de listes à déclencher (selectList) event et l'ajouter à (state.selectedList.list). Now (selectList) est utilisé chaque fois que l'événement onClick fonctionne sur un tableau de listes. La question est quand et comment dois-je gérer l'événement d'ajouter d'abord ajouté une liste à selectedList et d'utiliser (selectList) que l'événement onClick comme je l'ai utilisé auparavant.

export default connect(
     state => ({ 
     lists: getEntities('lists')(state), 
     selectedList: state.selectedList.list 
     }), 
     dispatch => ({ 
     addList: (name) => dispatch({type: 'ADD_LIST', payload: name}), 
     selectList: (listId) => dispatch({type: 'CHANGE_SELECTED_LIST', payload: listId}) 
     }) 
    )(Lists) 

Answer 1

Si vous avez deux name et id de liste que vous ajouter en cliquant, alors il pourrait être fait droit dans le gestionnaire addlist:

addList(name, id) { // bound with click 
    const size = this.props.lists.length 
    this.props.addList(name) 
    if(!size) { 
    this.props.selectList(id) 
    } 
} 

Sinon, vous devez attendre la liste est créée (pour obtenir le id), puis envoyez l'action selectList. La solution la plus sale pourrait être juste:

addList(name) { // bound with click 
    const size = this.props.lists.length 
    this.props.addList(name) 
    if(!size) { 
    // don't do that! it's just for proof of concept 
    setTimeout(() => this.props.selectList(this.props.lists[size].id)) 
    } 
} 

Pour aller plus loin, vous pouvez utiliser componentWillReceiveProps crochet pour attraper le lists.length becames 1, puis déclencher selectList normalement:

componentWillReceiveProps(nextProps) { 
    const previousSize = this.props.lists.length 
    const size = nextProps.lists.length 
    if(previousSize === 0 && size === 1) { 
    this.props.selectList(nextProps.lists[size].id)) 
    } 
} 

Une autre option serait un réducteur où nous don « t traiter avec la nouvelle liste id, mais seulement avec une taille de listes précédente (et pas besoin de déclenchement d'action supplémentaire):

case ADD_LIST: 
    return {...state, 
    lists: [...state.lists, 
     action.newList 
    ], 
    selectList: {...state.selectList, 
     list: !state.lists.length ? action.newList : state.selectList.list 
    } 
    } 

Enfin, au lieu de tous ci-dessus, le créateur d'action (le favori pour moi):

export function addList(name) { 
    return (dispatch, getState) => { 
    const size = getState().lists.length 
    const newList = generateNewListByName(name) 
    dispatch({ 
     type: ADD_LIST, 
     newList 
    }) 
    if(size === 0) 
     dispatch({ 
     type: CHANGE_SELECTED_LIST, 
     selectedListId: newList.id 
     }) 
    } 
    } 
} 

Le dernier pice doit être adapté à votre infrastructure, mais l'idée principale reste le même: faire une certaine logique par une condition d'état précédente (size === 0).