Рэдекс и веб-пакет и сплитчанк

Question

У меня есть два компонента в основном, как эти:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";

import gommeStore from "../stores/gomme-store.js";

import { Cart } from './cart/cart.jsx';

if (document.getElementById('cart-full')) {
  ReactDOM.render(
    <Provider store={gommeStore}>
      <Cart />
    </Provider>,
    document.getElementById('cart-full')
  );
}

и это

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";

import gommeStore from "../stores/gomme-store.js";

import { Cart } from './cart/NavBar.jsx';

if (document.getElementById('cart-full')) {
  ReactDOM.render(
    <Provider store={gommeStore}>
      <NavBar />
    </Provider>,
    document.getElementById('cart-full')
  );
}

второй компонент находится в нескольких точках входа в моем webpack.config, скажем, это выглядит так:

module.exports = {
  entry: {
    'global': [
      './reactjs/scripts/app.js',
      './reactjs/scripts/navbar.js',
    ],
    'cart': [
      './reactjs/scripts/app-cart.js',
      './reactjs/scripts/navbar.js'
    ],
    'tires': [
      './reactjs/scripts/app-tires.js',
      './reactjs/scripts/navbar.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, "/wwwroot/js/")
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  },

с этой конфигурацией NavBar Компонент заканчивается в common.js кусок, и следствием этого является разделенное / отключенное состояние, что означает Cart компонент и NavBar компонент не разделяет одно и то же состояние

Если я изменю свои исходные файлы так, чтобы NavBar компонент заканчивается в той же части с Cart Компонент они оба находятся в одном и том же состоянии редукции.

Это так и должно быть?

Я делаю что-то не так?

Заранее благодарю за любую помощь!