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

前端之家收集整理的这篇文章主要介绍了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相关文章