render内でReact Routerを使ってRedirectした後に,Reduxのstateにdispatchしたら,警告が発生する問題をコンストラクタとrenderを併用して解決

やりたいこと

Reduxのstateからリダイレクト先を取ってきて,React Routerでリダイレクトしたら,リダイレクト先をクリアします.

この処理が何故かコンポーネントの一部のcomponentWillReceivePropsで行なわれていて,そのコンポーネントを表示しない設定を追加したかったのでHoCに移しました.componentWillReceivePropsはもう消去が確定してますしね.

なんでそんな実装になってたの

React関係ない外部コンポーネントでイベント待受してリダイレクト処理が入るので.

renderに全部書いたら警告出ますね

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor).
Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

まあそりゃdispatchとかいう副作用を起こしたら警告も出しますよね.

でもcomponentWillMountってもうunsafeじゃないですか?

componentwillmountは既にunsafe.

新規実装には到底使えないじゃないですか.

コンストラクタに移せば良くない?

いや毎回読みなおされるわけじゃないのでダメです.

componentDidMountは?

これもReduxのstate変わればmountされなおすわけじゃないのでダメです.

コンストラクタとrender両方使って解決

render内にリダイレクト処理をRedirectコンポーネントを使って書く.

コンストラクタ内部でReduxのredirectフィールドを消去する.

これで警告なし,unsafeのライフサイクル無しで処理できます.

本当にこれで良いのか?少し疑問ですが,このコンポーネントが呼び出される時はコンストラクタで必ずredirect先は消滅して,そこからリダイレクトを受け付けるので問題ないはず.

トップレベルのHoCよりRoutingをclassにして処理置いたほうが良かったかもしれません.

このエントリーをはてなブックマークに追加 fb-like g-plusone pocket