還元状態の変更時に要素を削除します

Question

還元状態から要素を削除するときにコンポーネントを更新する際に問題があります。

私のコンポーネント：

const mapStateToProps = state => ({ 
    products: state.shoppingBasket.list, 
}); 

const ShoppingBasket = React.createClass({ 
    propTypes: { 
    removeProduct: React.PropTypes.func.isRequired, 
    products: React.PropTypes.array, 
    open: React.PropTypes.func.isRequired, 
    }, 
    removeFromBasket(index, name) { 
    this.props.removeProduct(index); 
    }, 
    render() { 
    return (
     <div> 
     {this.props.products.map((product, index) => (
       <div key={index}> 
       product.name 
       <button onClick={() => this.RemoveFromBasket(index)} 
       </div> 
      ); 
     )} 
     </div> 
    ); 
    }, 
}); 

export default connect(mapStateToProps, actions)(ShoppingBasket); 

私の減速：

export default function shoppingBasket(
    state = { 
    list: [], 
    }, 
    action 
) { 
    let tmp = []; 
    switch (action.type) { 
    case SHOPPING_BASKET_ADD: 
     return { list: [...state.list, action.payload.product] }; 
    case SHOPPING_BASKET_REMOVE: 
     tmp = state.list; 
     tmp.splice(action.payload.index, 1); 
     return { list: tmp }; 
    default: 
     return state; 
    } 
} 

Reduxの状態で挿入要素私のコンポーネントはsuccessfuly更新が、私はボタンをクリックするとremoveFromBasket要素を呼び出すReduxの状態から削除しました委員会は更新してはならない。

Answer 1

spliceは、新しい配列を返しませんが、呼び出された配列を変更するだけで、listプロパティは変更されません。 Reduxでは常に新しい状態オブジェクトを返さなければなりません。そうしないと、内部的に現在のプロパティと次のプロパティの浅い比較が実行されるため、コンポーネントが更新されないため、参照が変更されていない場合、コンポーネントは同等とみなされ、コンポーネントの再レンダリングはできません。あなたはこのようなRedux wayに配列フロン項目を削除することができます

case SHOPPING_BASKET_REMOVE: 
     return { list: [ 
     ...state.list.slice(0, action.payload.index), 
     ...state.list.slice(action.payload.index + 1) 
     ] 
    }