reactjs - react-redux connect() 容器可以实现像 componentDidMount 这样的生命周期方法吗？

Question

我在我的react-redux站点中遇到了重复的模式:组件显示来自 Web API 的数据，并且应该在加载时自动填充，无需任何用户交互。

我想从容器组件启动异步获取，但据我所知，唯一的方法是通过显示组件中的生命周期事件。这似乎使它成为可能不可能把所有的逻辑都放在容器里，只用哑的无状态功能组件来展示。

这意味着我无法将无状态功能组件用于任何需要异步数据的组件。这似乎不对。

看起来“正确”的方法是从容器发起异步调用。然后，当调用返回时，状态将被更新，容器将获取新状态，然后通过 mapStateToProps() 将这些状态传递给其无状态组件。

在 mapStateToProps 和 mapDispatchToProps 中进行异步调用(我的意思是实际调用异步函数，而不是将其作为属性返回)没有意义。

所以我最终要做的是将异步调用放入 mapDispatchToProps() 公开的 refreshData() 函数中，然后从两个函数调用它或更多 React 生命周期方法:componentDidMount 和 componentWillReceiveProps。

是否有一种干净的方法来更新 redux 存储状态，而无需在每个需要异步数据的组件中调用生命周期方法？

我是否应该在组件层次结构的更高层进行这些调用(从而缩小此问题的范围，因为只有“顶级”组件需要监听生命周期事件)？

编辑:

为了避免混淆我所说的 connect()ed 容器组件的含义，这里有一个非常简单的示例:

import React from 'react';
import { connect } from 'react-redux';
import {action} from './actions.js';

import MyDumbComponent from './myDumbComponent.jsx';

function mapStateToProps(state)
{
  return { something: state.xxxreducer.something  };
}

function mapDispatchToProps(dispatch)
{
  return { 
       doAction: ()=>{dispatch(action())}
  };
}

const MyDumbComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyDumbComponent);

// Uh... how can I hook into to componentDidMount()? This isn't 
// a normal React class.

export default MyDumbComponentContainer;

Answer 1

Jamie Dixon已经编写了一个包来执行此操作!

https://github.com/JamieDixon/react-lifecycle-component

用法如下:

const mapDispatchToProps = {
    componentDidMount: getAllTehDatas
}

...

export default connectWithLifecycle(mapStateToProps, mapDispatchToProps)(WrappedComponent)