は、ルータを反応 - 一度だけコンポーネント

Question

あたりのAJAX呼び出しを行う、私は次のように私のルートを設定している：

<Router> 
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
     <Route path="/contact" component={Contact} /> 
    </Switch> 
</Router> 

私はAJAX呼び出しに搭載されている唯一の拳の時間を作りたいホームコンポーネントに。

export default class Home extends Component { 
    componentDidMount(){ 
     //make ajax call only once. Do some stuff on .then() 
    } 
} 

問題は、ユーザーがホーム〜約ページを切り替えた場合、ホーム成分を返すが、それゆえ私のAJAX呼び出しが再びトリガされ、再び、すべてをレンダリングすることです。

どうすればこの問題を解決できますか？ 最初のデータフェッチをreduxストアに格納してから、if文を使用するか、より良い方法がありますか？

Answer 1

Reduxを使用する場合は、まだデータがない場合は、データをフェッチするアクションをディスパッチする必要があります。

class Home extends Component { 
    componentDidMount(){ 
     if (!this.props.homeContent) { 
      this.props.dispatch(fetchHomeContent()); 
     } 
    } 
} 

// Map redux store to your component props 
const mapStateToProps = (state) => { 
    return { 
     'homeContent': state.homeContent 
    } 
} 

// Redux 'connect' function, to subscribe your component for state changes. 
export default connect(mapStateToProps)(Home); 

は、あなたのアクションが非同期であるので、あなたはReduxの-サンクミドルウェアを使用する必要があり、それはセットアップだのためにドキュメントをチェックアウトしてください。

あなたの行動：

function fetchHomeContent(subreddit) { 
    return dispatch => { 
     return fetch(`https://your-domain/pathname`) 
      .then(response => response.json()) 
      .then(json => dispatch(receiveData(json))) 
    } 
} 

function receiveData(json) { 
    return { 
     type: 'receive', 
     data 
    } 
} 

そして、あなたの減速：

switch (action.type) { 
    case 'receive':   
     return Object.assign({}, state, { 
      'homeContent': action.data 
     }) 
    default: 
     return state 
} 

これはちょうどあなたの一般的なセットアップのあなたのアイデアを与えることですが、あなたはまだセットアップ（お店を、それを配線する必要があり、 root reducerなど）、Redux docs/tutorialに従うのが最善の方法です。

このソリューションは、アプリの他の部分でも同様のキャッシングが必要な場合に適しています。あなたに大きな負担がかかる場合は、上記のようにlocalStorageに保存することができます。そして、それをcomponentDidMountで読んでください。