reduxをcomponentWillMountで使用すると反応コンポーネントが2回レンダリングされないようにする

Question

componentWillMount関数でredux状態の変更をディスパッチするReactコンポーネントがあります。その理由は、コンポーネントがロードされたときに、URL（react-routerによって提供）からidを取得し、そのidのデータで状態を設定するアクションをトリガする必要があるためです。ここで

がコンポーネントである：

class Editor extends React.Component { 

    componentWillMount() { 
     const { dispatch, params } = this.props 
     dispatch(editItem(params.id)) 
    } 

    render() { 
     const item = this.props.item 
     console.log("Editing", item) 
    } 
} 

export default connect(state => ({item: state.item}))(Editor) 

ここでキャッチです：renderは二回と呼ばなっています。 itemは最初の呼び出しでは定義されておらず、2番目の呼び出しでは有効です。理想的には、（editItemアクションが送出されて実行された後に）this.props.itemが実際に存在する場合にのみ呼び出されるのが理想です。 React docsによると

：「あなたは、このメソッド内でsetStateを呼び出す場合、render()が更新された状態が表示され、状態変化にもかかわらず、一度だけ実行されます。」

reduxでは、dispatchは、setStateを呼び出すことに相当します。これは状態が変化するためです。しかし、私は方法で何かを推測しているconnectの作品はまだrenderを2回呼び出す原因となっています。

if (!item) return;のような行を追加する以外に方法がありますか？

Answer 1

react-reduxライブラリには既に問題があるようです。

https://github.com/rackt/react-redux/issues/210

Answer 2

editItemは何をしますか？それは還元状態にアイテムを追加するか、それとも既に存在していますか？

私が想像していることは、現行の小道具、すなわち空白のアイテムでレンダリングサイクルが発生することです。 それは、アイテムを設定することで、小道具が変更されたときに再びレンダリングされます。

このようなことを解決する方法の1つは、エディタをラップする上位コンポーネントを作成し、アイテムが設定されるまで、描画画面または空のdivに設定されますが、ディスパッチアクションを呼び出します。そうすれば、エディタにはアイテムがあることが保証されます。

しかし、editItemが何をしているのかわからなくても、知るのは難しいです。たぶんあなたはそのコードを貼り付けることができますか？

Answer 3

必要な小道具がロードされる前に、別のコンポーネント（またはコンポーネントなし）をロードする基本パターンを処理する上位コンポーネントを作成することがあります。

export const LoaderWrapper = function(hasLoaded, Component, LoaderComponent, onLoad) { 
    return props => { 
     if (hasLoaded(props)) { 
      return <Component {...props} /> 
     } 
     else { 
      if (onLoad) onLoad(props) 

      return { LoaderComponent ? <LoaderComponent /> : null } 
     } 
    } 
} 

次に、接続する前にコンポーネントをラップして、目的の動作を得ることができます。

export default connect(state => ({item: state.item}))(LoaderWrapper(
    ((props) => !!props.item), 
    Editor, 
    null, 
    (props) => props.dispatch(editItem(props.params.id)) 
)) 

これらの種類のラッパー関数をよりうまく構成できるように、カリングマジックを追加したい場合があります。詳細はrecomposeをご覧ください。