ReactとRedux：処理後リダイレクト

Question

私はReact/Reduxでウェブサイトを開発しています。私はサンク・ミドルウェアを使ってAPIを呼び出しています。私の問題は、行動後のリダイレクトに関係しています。

私は本当にどのようにリダイレクトを行うことができますか：私の行動では、減速機で、私のコンポーネントで...？

私のアクションは次のようになります。

export function deleteItem(id) { 
    return { 
     [CALL_API]: { 
      endpoint: `item/${id}`, 
      method: 'DELETE', 
      types: [DELETE_ITEM_REQUEST, DELETE_ITEM_SUCCESS, DELETE_ITEM_FAILURE] 
     }, 
     id 
    }; 
} 

react-reduxはすでに私のウェブサイト上で実装され、私は以下のように行うことができますが、要求が失敗した場合、私は使用をリダイレクトしたくないことを知っている：

router.push('/items'); 

ありがとうございます！

Answer 1

通常より良い練習は、このようなコンポーネントにリダイレクトすることです：彼らは副作用があってはならないので、

render(){ 
    if(requestFullfilled){ 
     router.push('/item') 
    } 
    else{ 
     return(
      <MyComponent /> 
     ) 
    } 
} 

Answer 2

は間違いははあなたの減速からリダイレクトされません。 api-redux-middlewareを使用しているようですが、私は成功/失敗/補完のコールバックを持っていないと考えています。これはライブラリにとって非常に便利な機能だと思います。

In this question from the middleware's repo,レポの所有者は、このような何かを示唆している：

// Assuming you are using react-router version < 4.0 
import { browserHistory } from 'react-router'; 

export function deleteItem(id) { 
    return { 
    [CALL_API]: { 
     endpoint: `item/${id}`, 
     method: 'DELETE', 
     types: [ 
     DELETE_ITEM_REQUEST, 
     { 
      type: DELETE_ITEM_SUCCESS, 
      payload: (action, state, res) => { 
      return res.json().then(json => { 
       browserHistory.push('/your-route'); 
       return json; 
      }); 
      }, 
     }, 
     DELETE_ITEM_FAILURE 
     ] 
    }, 
    id 
    } 
}; 

私は個人的に、私が欲しいのページへのtrueの場合、希望ルートというのが私の連結成分の小道具に旗を持っていることを好みます。そのように私はcomponentWillReceivePropsを設定します：Reduxの範囲で

componentWillReceiveProps(nextProps) { 
    if (nextProps.foo.isDeleted) { 
    this.props.router.push('/your-route'); 
    } 
} 

Answer 3

を使用する必要があります `あなたは、このフラグをバックリセットする代わりにbrowserHistory.push

import { push } from 'react-router-redux' 

store.dispatch(push('/your-route'))