componentDidMountにアクションをディスパッチする（react/redux）

Question

私はreact/reduxの新しい相対性理論です。私は（おそらく哲学的な）質問をしたいと思っています。

リアクションコンポーネントのcomponentDidMountにアクションをディスパッチしてもいいですか？

もしそうでない場合は、そのアクションをなぜ、どこにディスパッチする必要がありますか？

もしそうなら、それ以上の質問はありませんか？ :)

Answer 1

はい、アクションはcomponentDidMount()にディスパッチしても問題ありません。また、初期UIのレンダリングを遅くすることがないため、推奨されることです。

コンポーネントが最初にレンダリングされた後に関数が実行されるので、コンポーネントがレンダリングされる瞬間から、そしてAPIコールからデータを受け取った瞬間の間にあることがあります。

Answer 2

ルートを使用する場合、アクションをディスパッチする別の推奨方法はroutes-method "onEnter"です。これは、コンポーネントがアクション（またはapi-call）に依存しないようにするためです。

私は個人的に両方の方法（componentDidMountとonEnter）は問題ないと思います。プログラマーは、自分のアプリケーションに最適なソリューションを選択することができます。

Answer 3

はい、必ずcomponentDidMountフックを使用してください。

典型的なユースケースがあるかもしれない：

• コンポーネントは、画面に表示されます例えば、サーバへのテーブル
• リクエストがデータを取得するためにトリガされ
• スピナー/ローダは、コンポーネントをカバーすることが示されています
• データが戻る
• スピナーが削除され、データが表に示されています。その後、

  部品マウント）フェッチデータを、私はそのは少し長いけど、私はしばらくの間、この種の問題に自分自身を働いていたので、私は、私は次のパターンを共有するだろうと思っ

アクションがトリガーされます。アプリケーション状態の「isFetching」値は、スピナーが図示されているか否かを判断する（iは「高度ローダ」またはいくつかのそのようなライブラリを使用すると思う）

export default class MyComponent extends React.Component { 

    componentDidMount() { 
    AppDispatcher.dispatch({ 
     type: ActionTypes.FETCH_DATA, 
    }); 
    } 

    render() { 
    let isFetching = this.props.my.application.path.isFetching; 
    return (
     <Loader show={isFetching} message={'loading'}> 
     <div> 
      My Component 
     </div> 
     </Loader> 
    ); 
    } 
} 

そして店でFETCH_DATA要求をトリガ：

class AppStore extends ReduceStore { 

    //...... 

    reduce(state, action) { 

    let imState = Immutable.fromJS(state); 

    switch (action.type) { 

     //...... 

     case ActionTypes.FETCH_DATA: 
     doGetRequest('/url_to_service'); 
     break; 

     //...... 
    } 
    return imState.toJS(); 
    } 
} 

要求は次のようになります：完了すると

function doGetRequest(endpoint, params = {}) { 

    //request is some kind of AJAX library. In my case 'superagent' 
    request.get(endpoint) 
    .set('Accept','application/json') 
    .query(params) 
    .end(
     (err, res) => { 
     if (res && res.ok) { 
      receiveData(endpoint, "SUCCESS", res); 
     } else { 
      receiveData(endpoint, "FAIL"); 
    }}); 
} 

それはその後、別のアクションを派遣します。バック店に行く

function receiveData(endpoint, state, responseData) { 
    AppDispatcher.dispatch(
    { 
     type: ActionTypes.SERVER_RESPONSE, 
     endpoint: endpoint, 
     state: state, 
     payload: responseData 
    } 
); 
} 

、第2動作が捕捉され、isFetchingフラグがfalseに設定され、アプリケーション・データが処理されます。

reduce(state, action) { 

    let imState = Immutable.fromJS(state); 

    switch (action.type) { 

     //...... 


     case ActionTypes.SERVER_RESPONSE: { 

     imState = imState.setIn(['my','application','path', 'isFetching'], false) 

     if (action.state == "SUCCESS") { 
      //do something with the action.response data (via state update) 
     }else if (action.state == "FAIL") { 
      //maybe show an error message (via state update) 
     } 
     break; 
     } 
    } 
    return imState.toJS(); 
    } 
} 

....ので、この一般的なユースケースは、componentDidMount方法からトリガされる最初のアクション、2つの「アクション」を使用し、2番目のアクションは、要求が終了した後にトリガされます。

希望は、このパターンが役立ちます:)