Question

我有一个简单的组件，它使用redux并异步检索数据：

class ProductList extends Component {
    componentDidMount() {
        // Dispatching an action which makes async request.
        this.props.getProductList();
    }
    componentDidUpdate(prevProps) {
        // Requesting new data if route has changed.
        if (prevProps.route.match.params.category !== this.props.route.match.params.category) {
            this.props.getProductList();
        }
    }
    render() {
        return (this.props.categoryProductList ?
        // Render product list
            :
        // Loading animation )
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        categoryProductList: state.shop.productList
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        getProductList: () => {
            dispatch(getProductList())
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductList)

工作正常。但是，当路线更改时，我想显示加载动画而不是对应于先前类别的旧数据。

在本文https://github.com/reactjs/rfcs/issues/26#issuecomment-365744134中，它描述了在不使用redux的情况下如何使用getDerivedStateFromProps进行操作。尽管它可能非常简单，但是我对如何将这个原理与redux结合使用感到有些困惑。我应该在本地状态下创建新变量来表示加载过程吗？或者我应该使用没有getDerivedStateFromProps的其他方法？

将getDerivedStateFromProps与Redux结合使用

0 个答案: