Reactjs 如何使用重组将来自api的数组置于组件状态？

我一直在使用React/Redux Saga，最近我开始使用recompose，这让我有点困惑，我仍在学习如何用这种新方法处理数据，所以在之前，如果我想从我的Redux状态获取数据并将其传递到本地状态，我会这样做：

class Comp extends Component {
    constructor(props){
       super(props);
       this.state = {
           data: this.props ? this.props.data :        
       }
    }

    // Or I can use componentWillReceive Props method to get the props and use setState to make my local state get data
    componentWillReceiveProps(props){
         this.setState({data: props.data});
    }

    render(){ 
        return (my UIs)
    }
}

function mapStatToProps(state){
   return { data: state.data }
} 

connect(mapStateToProps, null)(Comp);

现在，当我将逻辑与数据分离时，我必须使用另一种体系结构，一种接收数据并处理数据的组件（容器），另一种只是在大部分时间读取数据

我必须这样做：

function mapStatToProps(state){
   return { data: state.data }
} 

const CompContainer = compose(
    connect(mapStateToProps, null),
    withState('data', ??, null ), // I don't know how to push data my props to here before rendering UI
    withProps(({data}) => ({data}))
)(CompUI);

CompUI只有jsx元素，或者可能会有一些事件，我将通过在容器中添加WithHandler来执行这些事件

正如我在第二段代码的注释中提到的，我不知道如何将已知数据传递给这个组件localState

我怎样才能做到这一点？或者现在有办法做到这一点，因为我们必须用这种方法只处理函数组件

任何帮助都将不胜感激