条件に基づいてReduxディスパッチ2アクションを反応させよう

Question

私はstore on（addList）イベントを変更し、これが最初のリストであるかどうかチェックして（selectList）イベントを発生させてそれを（state.selectedList.list ）。 Now（selectList）は、onClickイベントがリストの配列を処理しているときに常に使用されます。 質問は、まず、selectedListにリストを追加し、以前に使用したようにonClickイベントのみを使用する（selectList）というイベントを処理する必要があります。

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

はさらに行く、あなたはlists.lengthをキャッチするcomponentWillReceivePropsフックを使用することができ、通常selectListをトリガし、その後1をbecamesと：

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）によって。