React Router、Redux、およびasync APIコール

Question

ユーザーがリンクをクリックすると、React Routerにコンポーネントが表示されます。このコンポーネントが表示するデータはエンドポイントから来たものですから、ベストプラクティスが何であるか不思議です。

fetchDataという関数を作成して、fetchを使用してエンドポイントでGETを実行して約束を返しました。この約束が解決されたら、状態を更新するReduxアクションを送りたいと思います。

redux-thunkでこれを行うことができますが、これ以上のライブラリを追加しなくても実装したいと思います。

私は 'コンテナ/プレゼンテーション'のアイデアに従おうとしており、Reactではステートレス機能コンポーネントを使用しています。一般的な概要に

が、これは私がやっているものです：

index.js

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
) 

app.js

const App =() => (
    <div> 
     <BrowserRouter> 
     <div> 
      <Header /> 
      <Switch> 
      <Route exact path="/" component={Main} /> 
      <Route exact path="/data-list" component={DataListContainer} /> 
      </Switch> 
     </div> 
     </BrowserRouter> 
    </div> 
) 

dataListContainer.js

const mapStateToProps = (state) => { 
    return { data: state.data } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { } 
} 

const DataListContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(DataList) 

dataList.js

const DataList = (props) => { 
    const rows = props.data.map(data => { 
    return <Data data={data} /> 
    }) 
    return (
    <div> 
     {rows} 
    </div> 
) 
} 

そしてData成分は、単にデータを表示します。私は関数fetchDataへの呼び出しをどこに追加すべきか、返された約束をどこで解決すべきか疑問に思っています。私は、約束が解決された後で行動を起こす必要があると思うが、これを行うための最良の場所がどこにあるのかはわからない。

その他の質問は次のとおりです。ユーザーが/data-listリンクをクリックしたときにのみ、データを一度だけ取得したいと思います。メインページに戻って再びdata-listに行くと、私は再びエンドポイントを呼び出さないようにしたいと思います。 React Route実装で隠されたコール機能はありますか？

Answer 1

私はルートとビューでこれが可能ではないと思います。 React Routerでページを切り替えると、コンポーネントはアンマウントされます。コンポーネントのすべてのデータもクリアされます。 （私のことを信じて、これはあなたが望むものです。そうしないと、ブラウザがクラッシュするようなセリエスのメモリ問題が発生するかもしれません）。また、あなたのビューは物事を表示する責任しか持たず、受け取ったデータで物事を行うべきではありません。

あなたの店でいくつかの実装を見てみましょう。例えば、APIから受信したデータをストアオブジェクトに格納する。次回誰かがストア内のfetchData関数を呼び出すと、新しい要求を行うのではなく、格納されたデータを提供します。ストアはアンマウントされないので、メモリ内のデータを保持できます。ページ全体をリロードすると、ユーザーは新しいデータのみを受け取ることに注意してください。だから、「ハードリフレッシュ」でも役に立つかもしれません。

もう1つのことは、そのエンドポイントを何度も呼びたくない理由です。受信するためにデータを大きく設定していますか？その場合、ページネーションを使用して断片化して提供してください。

Answer 2

dataListContainer.jsをステートフルなReactコンポーネントに変更してください。これはコンテナなので大丈夫です！正確にコードを覚えてはいけません。アイデアを伝えるだけです。

import { fetchData, DataList, store } '......' 

class DataListContainer extends React.Component { 
    componentDidMount() { 
    if (!this.props.data) { 
     store.dispatch(fetchData()) 
    } 
    } 
    render() { 
    return (<DataList data={this.props.data}/>); 
    } 
} 

const mapStateToProps = (state) => { 
    return { data: state.data } 
} 

export default connect(
    mapStateToProps 
)(DataListContainer)