反应无状态功能组件和组件生命周期

Question

所以我只是转而使用React中的 无状态功能组件与Redux ，我对组件生命周期感到好奇。 最初我有这个：

// actions.js

export function fetchUser() {
    return {
        type: 'FETCH_USER_FULFILLED',
        payload: {
            name: 'username',
            career: 'Programmer'
        }
    }
}

然后在组件中我使用componentDidMount来获取数据，如下所示：

// component.js

...
componentDidMount() {
  this.props.fetchUser()
}
...

切换到无状态功能组件后，我现在有一个容器：

// statelessComponentContainer.js

...
const mapStateToProps = state => {
  return {
    user: fetchUser().payload
  }
}
...

如您所见，目前我不是异步获取任何数据。 所以我的问题是，当我开始异步获取数据时，这种方法会导致问题吗？ 还有更好的方法吗？

我查看了这个博客 ，他们说如果您的组件需要生命周期方法，请使用ES6类 。 任何帮助将不胜感激。

Answer 1

首先，不要在mapStateToProps执行您要执行的mapStateToProps 。 Redux遵循单向数据流模式，其中通过组件调度操作，更新状态，更改组件。 您不应期望您的操作返回数据，而是期望商店使用新数据进行更新。

遵循这种方法，特别是在异步提取数据后，意味着您必须满足尚未加载数据的状态。 有很多问题和教程（即使在这个问题的另一个答案中），所以我不会担心在这里为你举一个例子。

其次，想要在组件安装时异步获取数据是一个常见的用例。 想要编写好的功能组件是一个共同的愿望。 幸运的是，我有一个库可以让你做到这两点 ： react-redux-lifecycle 。

现在你可以写：

import { onComponentDidMount } from 'react-redux-lifecycle'
import { fetchUser } from './actions'

const User = ({ user }) => {
   return // ...
}

cont mapStateToProps = (state) => ({
  user = state.user
})

export default connect(mapStateToProps)(onComponentDidMount(fetchUser)(User))

我已经对您的组件名称和存储结构做了一些假设，但我希望它足以让我们了解这个想法。 我很高兴为您澄清任何事情。

免责声明：我是react-redux-lifecycle library的作者。

Answer 2

如果还没有数据，请不要渲染任何视图。 这是你如何做到这一点。

解决问题的方法是从this.props.fetchUser()返回一个promise 。 您需要使用react-thunk dispatch您的操作（请参阅示例和信息如何设置。这很简单！） 。

您的fetchUser操作应如下所示：

export function fetchUser() {
  return (dispatch, getState) => {
      return new Promise(resolve => {
          resolve(dispatch({         
          type: 'FETCH_USER_FULFILLED',
          payload: {
            name: 'username',
            career: 'Programmer'
          }
        }))
      });
  };
}

然后在您的Component添加生命周期方法componentWillMount()以下代码：

componentDidMount() {
  this.props.fetchUser()
    .then(() => {
      this.setState({ isLoading: false });
    })
}

当然，您的类constructor应该将初始状态isLoading设置为true 。

constructor(props) {
  super(props);

  // ...

  this.state({
    isLoading: true
  })
}

最后在render()方法中添加一个条件。 如果您的请求尚未完成且我们没有数据，则打印'数据仍在加载...'，否则显示<UserProfile /> Component。

render() {
  const { isLoading } = this.state;

  return (
    <div>{ !isLoading ? <UserProfile /> : 'data is still loading...' }</div>
  )
}