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

我在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;
Jamie Dixon写了一个包来做这个!

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

用法看起来像这样:

const mapdispatchToProps = {
    componentDidMount: getAllTehDatas
}

...

export default connectWithLifecycle(mapStatetoProps,mapdispatchToProps)(WrappedComponent)

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...