使用Redux

Question

我有一个组件需要Redux中的信息才能从API加载。我想学习处理这种情况的最有效方法。

解释（简化）：

 class someComponent extends React.Component{
   constructor(props){
    super(props)
    this.state = {data: null}
   }
   componentWillMount(){
     if(this.props.reduxstate){ //api needs reduxstate
       api(`/someroute?q1=reduxstate')
       .then((data)=>this.setState({data:data})
    }
  }

  render(){        
    return(
      <div>
        <AnotherComponentNeedingAPIData data={data} />
      </div>
    )
  }


  function mapStateToProps(state){
    return{
      state.reduxstate
    }
  }

要明确的是，这里的错误是当它击中componentWillMount时，reduxstate不可用，因此api永远不会加载。我对这个错误不感兴趣，只是在上述情况下应该是正确的模式

我最初写出了我遇到这个问题的各种迭代。我知道解决这个问题的方法不止一种，但我觉得我错过了正确/最简单的方法。上面的一般模式是我的首选起点，因此我可以保持子组件无状态。

我做错了什么（如何以正确的方式思考这个问题？）？

编辑：我决定使用componentWillRecieveProps ......这很好，但它感觉不是正确的方法，因为这涉及在组件中的两个位置加载数据。

Answer 1

最简单的方法是componentWillRecieveProps，就像你所做的那样，我认为这很好。或者，您可以发送api调用的响应，并且需要api的组件可以通过redux访问它 - 但如果您只在一个地方使用数据，这是不必要的。

如果您的逻辑变得更加复杂，那么一些异步redux库可能对从组件中提取实现细节很有用，例如redux-thunk或redux-saga。

我喜欢redux saga，它允许你监听分配给redux的动作，然后执行api调用等异步操作，并调度更多动作。

这样你就可以在redux存储中获得你的api数据了，所以你需要数据的组件可以直接与redux连接。

它增加了一些间接性，所以我不会马上跳到这个解决方案。