更新コンポーネントは、後にオブジェクトを削除 - ReactJSは

Question

私はこれについてあなたの意見をお願いしたいと思います。基本的には、オブジェクトリストのアイテムを削除した後、コンポーネントリストを更新することです。現在、私は成功しdeleteHeroes(list,index)機能を経由してアイテムを削除することができますが、私のコンポーネントが削除された項目を反映するために、全く爽やかではありません。どうすればいいのですか？以下は私のコードです：

componentDidMount(){ 
    // Fetch lists of heroes 
    this.props.getAllHeroes(); 
} 

renderHeroesList(){ 
    var listData = this.props.heroes.map((heroes,index) => (
     <HeroesListComponent key={heroes.id} heroes={heroes} onDelete = {() => this.deleteHeroes(heroes,index)} /> 
    )); 

    return listData; 
} 

// Remove item on heroes list 
deleteHeroes(list,index){ 
    const heroesProps = this.props.heroes; 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
} 

render(){ 

    return(
     { this.renderHeroesList() } 
    ); 


function mapStateToProps(state){ 
    return { 
     heroes: state.heroes.data 
    } 
}} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators ({ 
     getAllHeroes: getAllHeroes, 
     deleteHero: deleteHero, 
    }, dispatch); 
} 

Answer 1

あなたの変更については何も通知していないためです。

あなたは、deleteHeroes後にこの

deleteHeroes(list,index){ 
    const { heroesProps, dispatch }= this.props; 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
    dispatch({type: 'SAVE_HEROES', heroes: heroesProps}); 
} 

// and somewhere in reducer 
case SAVE_HEROES: 
    return {...state, heroes: action.heroes} 

のようなものがアクションを派遣し、減速への適切な関数を記述する必要があります。 しかし、コンポーネントが（状態を変更）hereosを削除してみましょう、あなたはReduxのの考えを破りました。

代わりに、コンポーネントが直接あなたが「DELETE_HEROES」のようなアクションを派遣、英雄を変更すると減速が残りをやらせるべきではありません。

Answer 2

あなたが考慮すべき2つの主要なオプションがあります。

1. が共有される共通の祖先にデータ（状態を）入れて、それが反応するから、標準的な戦略です：https://facebook.github.io/react/docs/lifting-state-up.html

2. をReduxのにすべての状態を置きます（ https://github.com/reactjs/react-redux）、還元状態に基づいてコンポーネントとディスプレイを接続します。この場合は、uは削除した後、任意のものを行う必要はありません、Reduxのフレームワークは、データフローおよびUIリフレッシュの世話をします

Answer 3

あなたはすべてのコストで避けるべき副作用を持っています。あなたのケースでは、それはあなたがheroes小道具の内部リファレンスを変異されていることです。したがって、この問題を回避する典型的な計画は、小道具を複製し、新しい小道具データで新しい動作を送信することです。だからあなたのコードは次のようになります。

deleteHeroes(list,index){ 
    const clonedHeroesProps = this.props.heroes.slice(0); // clone the array 
    heroesProps.splice(heroesProps.indexOf(index), 1); 
    dispatch({type: 'SAVE_HEROES', heroes: clonedHeroesProps}); 
} 

より良い、より多くのReactish方法はImmutability Helpersを使って、次のようになります。

deleteHeroes(list,index){ 
    const clonedHeroesProps = update(heroesProps, {$splice: [[heroesProps.indexOf(index), 1]]}); 
    dispatch({type: 'SAVE_HEROES', heroes: clonedHeroesProps}); 
}