React/Redux/React Router - 仅在第一次访问路由或更改过滤器时调用 API

Question

有没有办法只在以下条件下运行props.fetchTransactions() ：

1. 当路线第一次被导航到
2. 如果props.filter改变

目前，每次导航到路由时它都会运行，因为<TransactionListContainer />被 react 路由器卸载并重新安装。 这会创建对 API 的不必要调用，因为它只是重新获取与我的 Redux 存储中已有的完全相同的结果集。

我能想到的唯一方法是将useEffect挂钩提升到根<App/>因此它位于路由器之外，但我不确定这是否是一个好方法，因为：

1. 它会在加载<App/>时调用 API，即使用户正在查看不同的路由
2. 如果我需要对其他容器重复此操作， <App/>将很快变得混乱

// App root
const App = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={ () =>  <TransactionListContainer /> } />
                ...other routes...
            </Switch>
        </BrowserRouter>
    );
}


// Container
const TransactionListContainer = (props) => {
    
    useEffect(() => {
        
        // This should only happen when the route is first visited or if props.filter has changed
        props.fetchTransactions(props.filter.fields, props.filter.pagination);
    
    },[props.filter]);

    // The transactions are passed to this container 
    // by redux: props.transactions. I haven't included 
    // any code that I believe isn't relevant 
    // to the question.
}

Answer 1

您可以提供一个标志变量，指示交易数据之前是否已缓存（在 redux 存储中可用）。

const TransactionListContainer = (props) => {
    useEffect(() => {
        if(!props.isCached){
          props.fetchTransactions(props.filter.fields, props.filter.pagination);
        }
    },[props.filter, props.isCached]);

}

function mapStateToProps(state) {
  const isCached = state.transactions.length !== 0
  return { isCached }
}

export default connect(mapStateToProps)(TransactionListContainer)