Redux非同期ディスパッチによって接続コンポーネントのエラーが発生する

Question

ボタンをクリックするとAPI呼び出しが行われ（setTimeoutによってシミュレートされます）、完了するとその項目は状態から削除されます。私はコンポーネントがレンダリングしようとしないことを期待しますが、必要な状態はもはや存在しないため、失敗して失敗します。

setTimeout(() => { 
    dispatch({ 
    type: 'REMOVE', 
    id 
    }); 
}, 0); 

Iは、親コンポーネントを想定：ディスパッチへの呼び出しを非同期的に行われるため

dispatch({ 
    type: 'REMOVE', 
    id 
}); 

The second fiddleはエラーを示します。ディスパッチの呼び出しが同期であるため、所望の挙動の動作を示す

The first fiddleその項目が配列から除外されているため、子コンポーネントをレンダリングしようとしなくなりました。状態からアイテムを削除し、コンポーネントが再レンダリングしようとするのを防ぐにはどうすればいいですか？

Answer 1

はい、これはあなたがそれを探しているもののような非同期呼び出しをサポートしていませんので、デフォルトの再来で問題であるモチベーションまで

https://github.com/gaearon/redux-thunk

スクロールReduxのを、サンク、それは基本的に正確な必要がありますあなたがここに投稿したのと同じコード。

::: EDIT :::私はあなたのコードを更新し、以下のコメントのオフに基づいて

私はこの問題の主な発生源の一つは小道具にマップ状態でアイテムのコンポーネントを接続したと思います。私はあなたがおそらくそれを必要とする/またはそれをしたいが、私はそれをもう少し明確にするために、コードを少しリファクタリングが、私は運び去ら得て、遠元からにそれを取ったかもしれませんしませんでした知っている

const mapStateToProps = (state, { id }) => { 
    var {text} = state.items.filter((x) => x.id === id)[0]; 
    return { 
    id: id, 
    text: text 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onRemove(id) { 
     setTimeout(() => { 
     dispatch({ 
      type: 'REMOVE', 
      id 
     }); 
    }, 0); 
    } 
    }; 
}; 

あなたが見てみたいと思っている場合は、ここに投稿してください。 【この問題に似]

https://jsfiddle.net/kriscoulson/ogkyspsp/