web-dev-qa-db-ja.com

React-Router＆Reduxを使用しているときにリンクをクリックしたときにアクションをディスパッチするにはどうすればよいですか？

リストエントリを追加/編集するためのページに移動するLinkがあるとします。

Link自体をクリックしたときにReduxアクションをディスパッチして、実際にそのページにリダイレクトされる前に、まずReduxストアを更新する方法を教えてください。

例：[編集]ボタンをクリックします->アクションがディスパッチされます->ストアが更新されます、_{'state': 'edit-mode'}_->リダイレクトに進みます。

それとも、私がやろうとしていることを達成するために別の方法を考えていますか？

多分コンポーネントがマウントされたとき、私は特定の条件に基づいてstateToEditのようなアクションを実行しますか？もしそうなら、私にあなたのやり方を見せてください。ありがとう

PS：すべての追加/編集/削除に1つのコンポーネントのみを使用しています。したがって、stateに基づいてレンダリングする方法を考えています。それが_edit-mode_であっても_delete-mode_などであっても同様です。

javascriptreactjsreduxreact-routerreact-redux
19
Joshua Rajandiran

この問題に対処するには、いくつかの方法があります。

  1. Linkを使用する代わりに、onClick関数でbrowserHistory.Push(path)を利用してみてください。
    • onClick内では、アクションをdispatchしてから、Pushを新しい場所に移動できます。
    • ただし、この一連のアクションをさまざまなコンポーネントで実行する場合は、コードの重複に悩まされるでしょう。
  2. この問題に対処するためのより堅牢な方法は、_redux-thunk_を実装することです。おつり。

Reduxサンクアクション

_export const dispatchThenRoute = (myAction, myPath) => {
    return (dispatch) => {
        dispatch(myAction)
        browserHistory.Push(myPath);
    }
}; 
_
14
lux