やりたいこと

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にして処理置いたほうが良かったかもしれません.