mapDispatchToProps 中的异步 - 包装器以确保在渲染之前分派所有内容

Question

我想要的结果是我的组件不呈现，除非所有异步函数都已分派。我将其用作包装器以确保所有内容均已发送。我试过两种方法：

调用componentWillMount中的所有内容并使用setState设置loaded = true。然后我可以根据我的状态的加载键渲染组件。

ajax = async () => {
  try{
    const { dispatch } = this.props;
    dispatch(loadPack('ars'));
    dispatch(loadPack('acr'));
    await dispatch(loadProds());
    await dispatch(loadRepls());
    await dispatch(checkEligibile());
    }catch (e) { console.log(e)}
 }

 componentWillMount() {
   this.ajax().then(() => {
     this.setState({ loaded: true });
   });
 }

render() {
 const { loaded } = this.state;
 return loaded ? <Component/> : null;
}

这得到了预期的结果，除了我看到这个错误：

ExceptionsManager.js:71 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

我尝试在 mapDispatchToProps 派送。理想情况下 loaded 应该 return 为真，我应该看到 this.props.loaded = true 来加载我的组件。但是，我收到的是 Promise 而不是结果。

我感觉被困在这里，不知道还能尝试什么。有什么建议吗？

const loadAsync = async dispatch => {
  dispatch(loadPack('ars'));
  dispatch(loadPack('acr'));
  await dispatch(loadProds());
  await dispatch(loadRepls());
  await dispatch(checkEligibile());
  return true
 };

 export const mapDispatchToProps = dispatch => ({
   loaded: loadAsync(dispatch),
 });

Answer 1

因为你使用的是 redux，所以你有一个全局的 redux 状态。因此，在所有分派之后，再分派一个将 reducer 状态设置为 true 的动作，这表明所有动作都已分派。

在组件中，使用 dispatchStateToProps 方法将 reducer state 转换为 props，然后使用该 prop 来检查天气是否已派发所有 action。大致应该是这个样子

ajax = async () => {
  try{
    const { dispatch } = this.props;
    dispatch(loadPack('ars'));
    dispatch(loadPack('acr'));
    await dispatch(loadProds());
    await dispatch(loadRepls());
    await dispatch(checkEligibile());
    // Add one more action here
    await dispatch(everythingDispatched());
    }catch (e) { console.log(e)}
 }

然后是跟踪那个的减速器状态

dispatchTrackerReducer.js
switch(action.type){
  case "everythingDispatched" :
       everythingDispatched: true
       break;
}

然后在组件中像这样使用 mapStateToProps

render() {
 const { everythingDispatched } = this.props;
 return everythingDispatched ? <Component/> : null;
}

function mapStateToProps(state){
  return {
       everythingDispatched:state.dispatchTrackerReducer.everythingDispatche
  }
}

mapDispatchToProps 中的异步 - 包装器以确保在渲染之前分派所有内容

Async in mapDispatchToProps - wrapper to ensure everything dispatches before rendering

reactjs

react-native

redux

redux-thunk

react-redux