特定のディスパッチ後にコンポーネントレベルからリダイレクトする - redux thunk

Question

私はかなり単純なユースケースを持っていますが、適切な答えを見つけるのは難しいです。私はReact、Redux、React Routerを使用しています& redux thunk middleware。

私は2つのモジュールのフードタグ&フードを持っています。これらのモジュールは、個別の作成、リスト、編集ページ/コンポーネントを持っています。実際の使用の場合、食品タグは特別な価値を持たない。フードオブジェクトが作成されるたびに、分離されたタグがフードオブジェクトのtagsプロパティに挿入されます。

一般的な使用例は、アイテムが正常に作成された後、反応ルータがそれをリストページにリダイレクトすることです。

私がfood-tagモジュールからcreateTagアクションを呼び出すときはいつも、私はハッキリなやり方でそれを行うことができます。ちょうど成功発送後、私は

browserHistory.push('/dashboard/tags')

を呼び出すことができるようにこれは私がコンポーネントを作成する食品から食品タグをインラインで作成することができ、問題に私をリードしています。コードは

以下に示す

export function createTag(tag) { 
return function (dispatch) { 
    axios.post(API_URL + 'api/tags', tag) 
     .then((response) => { 
      // I CAN DO REDIRECT HERE,BUT THIS CAUSES THE PROBLEM 
      dispatch({type: 'TAG_CREATE_RESOLVED', payload:response}); 
      toastr.success('Tag created Successfully.......!'); 
     }) 
     .catch((err) => { 
      dispatch({type: 'TAG_CREATE_REJECTED', payload: err}); 
      toastr.warning(err.message); 
     }) 
    } 
} 

成分/ container.js

createTag() { 
    //validatation & others.... 
    this.props.createTag(tag) 
} 

反応-Reduxの接続

function mapDispatchToProps (dispatch) { 
    return bindActionCreators({ 
     createTag: createTag 
    }, dispatch) 
} 

をactions.js私は基本的に私は、同様のコンポーネントから&ショー通知をリダイレクトすることができるように、アクションの種類が派遣されたコンポーネントレベルでのアクセス権を取得したい、という希望は何食べ物/ create.js

$('#food-tags').select2(select2settings).on('select2:selecting', function (event) { 
     let isNewTagCreated = event.params.args.data.newOption, 
      name = event.params.args.data.text; 
     if (isNewTagCreated && name !== '') { 
      reactDOM.props.createTag({name}); // reactDOM = this context here 
     } 
    }); 

で0

ほぼ同じパターンサンクスアクションの代わりに。私は正しい方法で考えていないかもしれません。まわりの死んだ簡単な仕事があるかもしれません。

Answer 1

redux-thunkが戻り値を関数から渡したことを知っておきましょう。だから、あなたは、アクションの作成者からの約束を返すことができますし、それがコンポーネントのコード

export function createTag(tag) { 
    return function (dispatch) { 
    return axios.post(API_URL + 'api/tags', tag) // return value is important here 
     .then((response) => dispatch({type: 'TAG_CREATE_RESOLVED', payload:response})) 
     .catch((err) => { 
     dispatch({type: 'TAG_CREATE_REJECTED', payload: err}) 
     throw err; // you need to throw again to make it possible add more error handlers in component 
     }) 
    } 
} 

あなたに完成する予定まで

コンポーネントのコードに続いて

createTag() { 
    this.props.createTag(tag) 
    .then(() => { 
     toastr.success('Tag created Successfully.......!'); 
     this.props.router.push() // I assume that you have wrapped into `withRouter` 
    }) 
    .catch(err => { 
     toastr.warning(err.message); 
    }); 

} 

を待つ今、あなたは、アクションロジックの間の適切な分割を持っており、ユーザーインターフェース。