防止 Redux-Thunk 重新请求已存储的数据

Question

我正在尝试使用 redux thunk 进行异步操作，它正在按照我想要的方式更新我的商店。我在this.props 中有我的图表的数据，方法是：

const mapStateToProps = (state, ownProps) => {
  const key = state.key ? state.key : {}
  const data = state.data[key] ? state.data[key] : {}
  return {
    data,
    key
  }
}
export default connect(mapStateToProps)(LineChart)

data 是 store 中的一个对象，每次我进行 XHR 调用以获取另一条数据时，它都会进入 store。

这是异步和同步操作

export function addData (key, data, payload) {
  return {
    type: ADD_DATA,
    key,
    data,
    payload
  }
}

export function getData (key, payload) {
  return function (dispatch, getState) {
    services.getData(payload)
      .then(response => {
        dispatch(addData(key, response.data, payload))
      })
      .catch(error => {
        console.error('axios error', error)
      })
  }
}

还有减速器：

const addData = (state, action) => {
  const key = action.key
  const data = action.data.results
  const payload = action.payload
  return {
    ...state,
    payload,
    key,
    data: {
      ...state.data,
      [key]: data
    }
  }
}

在the tutorial我一直跟着(code on github)，这似乎足够了，当存储中已经存在一条数据时，比如data['some-key'] redux 不会再次请求数据.我不完全确定它是如何预防的，但在课程中，确实如此。但是，我肯定会再次为我商店中已经存在的密钥进行网络调用

有什么方法可以防止我的商店中已经存在的数据出现 XHR？

Answer 1

Redux 本身对请求数据没有任何作用，或者仅在未缓存时才请求它。但是，你可以为此编写逻辑。这是一个典型的“仅在未缓存时才请求数据”thunk 可能是什么样子的虚假示例：

function fetchDataIfNeeded(someId) {
    return (dispatch, getState) => {
        const state = getState();
        const items = selectItems(state);

        if(!dataExists(items, someId)) {
            fetchData(someId)
                .then(response => {
                    dispatch(loadData(response.data));
                });
        }
    }
}

我还有a gist with examples of common thunk patterns，您可能会觉得有用。