检查所有磁通事件的事件在当前页面中加载 - Flux，React

Question

我需要触发一个事件，检查当前页面/当前路由中是否完成了所有事件加载。

假设

Current route is `/address`

在此路线中加载的事件是

LOAD_NAME
LOAD_PHONE_NUMBER
LOAD_GOOGLE_LOCATION

所以这里LOAD_GOOGLE_LOCATION将花时间执行。在完成所有这些事件加载后，我需要触发另一个Event

我正在使用React和Flux

Answer 1

如果您使用redux-thunk，您可以实现以下操作：

const loadName = url => dispatch => fetch(url)
  .then(res => res.json())
  .then(json => {
    dispatch({ type: 'LOAD_NAME', data: json  }
    return json;
  }))


const loadPhoneNumber = url => dispatch => fetch(url)
  .then(res => res.json())
  .then(json => {
    dispatch({ type: 'LOAD_PHONE_NUMBER', data: json  };
    return json;
  }))


const loadGoggleLocation = url => dispatch => fetch(url)
  .then(res => res.json())
  .then(json => {
    dispatch({ type: 'LOAD_GOOGLE_LOCATION', data: json  };
    return json;
   }))

//load one after the other
const loadAll = () => dispatch => 
  loadName(…)
    .then(json => loadPhoneNumber(json.number))
    .then(json => loadGoogleLocation(json.location))
    .then(dispatch({ type: 'ALL_LOAD' }))

//load all in parallel
const loadAll = () => dispatch => Promise.all([
  loadName(…),
  loadPhoneNumber(…),
  loadGoggleLocation(…)
])
  .then(([namejson, numberjson, locationjson]) => 
     dispatch({ type: 'ALL_LOAD' }))

这条路：

• 您的行为仍然可以使用»独立«
• 当数据到达时，您的状态会更新，
• 您不需要检查现有数据/标志的状态，以确保满足所有依赖关系
• 您可以轻松地将其扩展到更多依赖项