React路由器，Redux和異步API調用

當用戶點擊一個鏈接時，React Router將顯示一個組件。該組件將顯示的數據來自終端，因此我想知道最佳做法是什麼。React路由器，Redux和異步API調用

我創建了一個名爲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實現中是否隱藏了一次隱藏的功能？

來源

2017-08-27 Lucas Beier

-1

我不認爲這是可能的路線和意見。當您使用React Router切換頁面時，組件將卸載。組件的所有數據也被清除。（相信我，這是你想要的，否則你可能會遇到一些讓你的瀏覽器崩潰的serieus內存問題）。此外，您的視圖只負責顯示內容，不應對收到的數據做任何事情。

看看你的商店中的一些實現。例如，將來自API的接收數據存儲在商店對象中。下次有人在商店中調用fetchData函數時，請提供存儲的數據，而不是發出新的請求。商店從不卸載，因此它可以將數據保存在內存中。請記住，如果重新加載整個頁面，用戶將只收到新的數據。所以一個'硬刷新'，但可能是有用的..

你可以做的另一件事是問自己爲什麼你不想多次調用該端點？數據集是否大到可以接收？在這種情況下，使用分頁並將其分成幾部分。

來源

2017-08-27 21:49:03

將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)

來源

2017-08-27 22:22:29 TheNickyYo

React路由器，Redux和異步API調用

回答

相關問題