redux实际应用问题

Recoding
  • 417
class PhotoList{
    componentDidMount(){
        if(this.props.photos){// 如果redux中没有photos
            this.props.actions.getPhotos() // 异步请求
        }
    }
}
export connect(..)(UserHeader)

class App {
    render(){
        return <div>
            <PhotoList/>
            <PhotoChooser/>
        </div>
    }
}

假如PhotoChooser,需要photo

class PhotoChooser{
    componentDidMount(){
        const {actions,photos}=this.props
        actions.SetCurrentPhoto(photos[0]) // 设置第一个为默认的currentPhoto
    }
}

这些写得有问题,假如第一次请求该页面,redux中没有Photos(此时PhotoList正在请求),那么就无法设置默认的currentPhoto
所以要搞成这样

class PhotoChooser{
    componentDidMount(){
        const {actions,photos}=this.props
        if(photos){
            actions.SetCurrentPhoto(photos[0]) // 设置第一个为默认的currentPhoto
        }
    }
    componentWillReceiveProps(nextProps){
        const {currentPhoto,photos}=this.props
        if(!currentPhoto&&photos){
            actions.SetCurrentPhoto(photos[0])
        }
    }
}

componentDidMount仍然要保留,因为渲染该组件时,redux中也可能已经有photos(在前文例子中不会有这个情况,但是实际场景很可能会出现这个情况),此时只有componentDidMount会调用
如果redux中没有photos,那么PhotoList会发出请求,而PhotoChooser就在componentWillReceiveProps等待photos

问题:
在使用redux后,尤其是把异步请求放到redux后,componentWillReceiveProps必须要写一些逻辑
我想知道,这是不可避免的吗?有没有更好的写法

回复
阅读 901
1 个回答

建议同一个redux的state传入两个组件,在PhotoListactions.getPhotos()调完后直接设置currentPhoto, 这样PhotoChooser组件直接就会更新。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏