防止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)

数据是商店内的对象，每次我进行XHR调用以获取另一条数据时，它都会进入商店。

这是异步和同步操作

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本身对请求数据没有任何作用，或者只是在没有缓存的情况下请求数据。但是，你可以为此编写逻辑。这是一个虚假的例子，说明了如果没有缓存的典型＆＃34;唯一的请求数据＆＃34; 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你可能觉得有用。