react、redux使用问题

Question

假设redux中的state是这样的：

state = {
    value:'aaa',
    list:['123','321','12231']
}

A组件是一个input，input的值对应state中的value。
B组件是一个list，list内容需要根据value值请求接口获取，比如http://api.com?query=aaa
如图：

当A的值更新，重新获取list并渲染B组件，正常逻辑是这样:
change事件发异步action请求新的list ==> 更新redux state中的list ==> B组件渲染

现在的问题是，因为一些特殊的原因，无法在A组件change事件中增加代码。是否可以在B组件中，监听value值变化，来自行更新list？
如果在componentWillMount中获取并更新list，只会在B组件初始化时执行一次，当value变化时，不会再次执行。
如果在componentWillReceiveProps也加入获取并更新list的方法，因为是异步的，会导致循环请求和渲染。

求助！

Answer 1

似乎找到解决方法了，如果有更好的办法，请指正！

    componentWillMount() {
        const { value } = this.props;
        getAndUpdateList(value);
    }
    
    componentWillReceiveProps(nextProps) {
        const { value } = this.props;
        if (value != nextProps.value) {
            getAndUpdateList(value);
        }
    }

Answer 2

如果可以，在外面再包裹一层父组件，把A和B组件的状态state提升到父组件，A组件的value变化时，触发父组件的update函数，更新B组件的list

Answer 3

react16 有一个新的生命周期：

static getDerivedStateFromProps(nextProps, prevState)

这个生命周期就是用来根据props计算state的，它除了在组件实例化或重渲染时会被调用，也会在props变更时被调用，并且需要返回一个新的对象来更新组件的state

如果list为B组件的私有状态：

static async getDerivedStateFromProps(nextProps, prevState) {
    const newState = prevState;
    const { value } = nextProps;
    newState.list = await getAndUpdateList(value);
    return newState;
}

使用redux store：

static getDerivedStateFromProps(nextProps) {
    const { value } = nextProps;
    getAndUpdateList(value);
    // 返回 null 表示不更新状态
    return null;
}

如此，组件初始化后会去获取list，value改变时也会去更新list