React Redux根据条件调度2个操作

Question

我正在尝试更改（addList）事件的存储并检查这是否是第一个列表要激发（selectList）事件的列表数组并将其添加到（state.selectedList.list ）。现在（selectList）在onClick事件处理一个列表数组时使用。 问题是什么时候以及如何处理向selectedList添加第一个列表的事件，以及如何使用（selectList）onClick事件。

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

如果你有两个name，你通过点击添加列表id，那么它可能是正确的addList处理程序中完成：

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

否则，你需要等待创建列表（获取id），然后调度selectList操作。最脏的解决方案可能只是：

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)) 
    } 
} 

的进一步深入，你可以使用componentWillReceiveProps钩抓lists.length becames 1，然后触发selectList正常：

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)) 
    } 
} 

另一种办法是减速，我们不要没有处理新列表id，但仅与之前的列表大小（并且不需要额外的动作触发器）：

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

最后，而不是所有以上，动作创造者（最喜欢的一个对我来说）：

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 
     }) 
    } 
    } 
} 

最后PICE需要适应您的基础设施，但主要的想法是一样的：做一些逻辑由以前的一些状态条件（size === 0）。