Reduxとルーターでデータが見つからない場合、リダイレクトする正しい方法は何ですか？

Question

私はこのようなReduxの状態を持っている：currentItemIdが設定されている場合

{ 
    currentItemId: 1, 
    items: [{id: 1, name: 'todo 1'}, ...] 
} 

、アプリはアイテムの詳細が表示されます。

まれに、currentItemがitems配列内の項目を表していないIDに設定されている場合、私は戻ってリダイレクトします。

私がリダイレクトを発行できるItemFormのconnectのように見える場所があります。

問題は、setStateを呼び出すことに不満があり、後でそれをスケジュールすることだけです。

また、項目が見つからない場合はItemFormを表示しないようにしたいと考えています。

いただきました。このシナリオで行うには正しいこと？あなたは少しあなたが使用している方法をルーティングするかによって異なりますリダイレクトする方法

Answer 1

。 react-router-domを使用していると仮定すると、レンダリングまたはcomponentDidMountのどちらかでリダイレクトを行うだけです。あなたは、次のwithRouter HOCを使用してのような何かを行うことができ、あなたのコンポーネントのための小道具にあなたのcurrentItemIdをマッピングすると仮定。反応-ルータ-DOM内のリダイレクトを行うには

componentDidMount() { 
    if(!this.props.currentItemId) { // Or whatever value you want to check for 
     this.props.history.push('/redirectpageurl'); 
    } 
} 

もう一つの方法は、Redirect componentをレンダリングすることです。

render() { 
    if(!this.props.currentItemId) { 
     return <Redirect to="/redirectpageurl" /> 
    } 
    // ... 
}