Использование одного и того же компонента несколько раз с одним и тем же редуктором и экземпляром переменных состояния для каждого вызываемого компонента

Question

Я использую custom-closable-tabs.js для создания вкладок для своего приложения, в которых для реагирования на состояние используются реаги и реактив-редукс.У меня есть сценарий, в котором мне нужно открыть несколько вкладок одного и того же компонента в приложении. Рассмотрим, у меня есть основной домашний компонент, который имеет 3 пользовательских ссылки, и у этих пользователей один и тот же компонент, но с разными данными, например, если щелкнуть по компоненту user1 <User name="Jon" />будет загружен в новую вкладку [Tab1], где выполняется вызов API для получения сведений о пользователе "Jon" из базы данных и сохранения данных в избыточном состоянии.Аналогично для второго пользователя [Tab2] <User name="Eve"> снова выполняется API-вызов для получения сведений о пользователе "Ева" и сохранения в одном и том же редукторе.

Поскольку я использую один и тот же редуктор для обоихпользователи, данные «Евы» отражаются в Таблице 1, где данные Джона отображались ранее.Как создать экземпляр состояния редукторов для каждого компонента отдельно, который может извлекать данные для отдельного пользователя и отображать на соответствующих вкладках, здесь пользователи заполняются динамически.

Компонент приложения

class App extends Component{
constructor(props){
    super(props);
    this.state = {
        data: '',
        activeIndex: 0
    }
}

componentWillMount(){
    this.state.data.push({
        tab: Maintab,
        component: <Main/>,
        id: maintab,
        closeable: false,
        activeIndex: 0
    })
}

openTab(user){
    this.state.data.push({
        tab: user,
        component: <User userName={user}/>,
        id: user,
        closeable: true,
        activeIndex: (this.state.data.length-1)
    })
}


render(){
    return(
        <CloseableTabs 
        data={this.state.data}
        noTabUnmount={true}
        activeIndex={this.state.activeIndex}
        />
    );
}

Главный компонент

render(){
return(
    <div>
        <div onCLick={()=>{this.props.openTab('Jon')}}>User1: Jon</div>
        <div onCLick={()=>{this.props.openTab('Eve')}}>User2: Eve</div>
        <div onCLick={()=>{this.props.openTab('Seth')}}>User3: Seth</div>
    </div>
);}

Пользовательский компонент

componentDidMount(){
    //Make Api call and store data in reducer with action GET_USER_INFO
}

render(){
    const {father,mother,company} = this.props
    return(
        <div>
            <span>Father:{father}</span>
            <span>Mother:{mother}</span>
            <span>Company:{company}</span>
        </div>
    );
}

Редуктор

const users = (state,action) =>{
switch(action.type){
    case 'GET_USER_INFO':
        return{userData: action.value.userData}
}}