Question

（这可能不是每个人的减少问题）

我当前的策略/思维过程是这样的：每个需要数据的容器组件，调度一个动作来获取componentDidMount中的数据（然后触发api请求，调度更新商店的动作）

这个问题：一些组件正在获取完全相同的数据。这也意味着当我加载我的应用程序时，会发生一些（有时是“大量”）不必要的请求和重新发送。

我的问题：处理此问题的更好方法是什么？

我个人认为有两种方式：

以某种方式缓存从服务器返回的数据，如果触发了具有缓存数据的新请求（并且在某个超时内发生），则返回该缓存数据而不是发出新请求。
在一个地方的其他地方获取我的所有应用数据。（我看到的缺点是我的容器组件不是“自给自足”）

我的猜测是，有一些更好的方法，我似乎无法看到：）

Answer 1

为了改善初始渲染，我会：

获取服务器上的数据并填充redux store
执行服务器渲染并将redux存储状态传递给客户端
向componentDidMount添加支票，以查看数据是否可用

像

这样的东西

componentDidMount() {
  if (this.props.shouldFetchData) {
    this.props.fetchData()
  }
}

我们有一个这样的系统，它工作正常。唯一的缺点是你必须在两个不同的地方（客户端和服务器）进行api调用，但我还没有看到一个没有重复的服务器端渲染的解决方案。

Answer 2

我喜欢将redux-thunk用于此类事情，因为您可以访问状态并做出相应的决策。 e.g。

const fetchData = (id) => {
    return (dispatch, getState) =>  {
        if (getState().path.to.data.isLoading)
            return

        dispatch({type: 'LOADING_DATA'})

        fetch(`${url}/${id}`).then(data => dispatch({type: 'SET_DATA', data}))
    }
}

然后在您的reducer中，您在调度isLoading操作时将'LOADING_DATA'设置为true，然后在收到false时将其切换回'SET_DATA'。 e.g。

const initialState = {isLoading: false}

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case 'LOADING_DATA':
            return { ...state, isLoading: true }
        case 'SET_DATA':
            return { ...state, ...data, isLoading: false }
    }
}

在商店更新时，将重新呈现在商店中查找相同数据的所有组件。

您也可以根据需要扩展此模式以满足您的需要，例如，存储时间戳而不是布尔值，并且不要对特定超时的请求进行跟进。

组件何时何地从服务器获取数据？

2 个答案: