What is the correct way to use react-router and redux in single page application?

Question

React

Introductory:
There is a simple browser game in react, which consists of 3 parts - the main page and two different game modes.
Right now it's just 3 separate html pages loading 3 different react apps (3 webpack entry points).
In each page, the state is stored in the redux store, and the state is completely controlled by the server - for each action, a new full state of the game arrives in the application, which replaces the current state in the root reducer (a debatable point, but not a question about it).
I want to make one full-fledged SPA out of three applications (apparently using react-router).
I understand how to make this navigation, but I don't understand what to do with redux store and states. The states of the three parts of the application are completely different.
The logic of work is as follows - the user, being on the main page, sends a request, for example, POST /game/create , in response to which the id of the newly created game comes from the server, with which you can get the game state (well, or the state of the new game arrives immediately).
What are my next steps with this data to show the user the screen with the game?

Answer 1

game_1 store:

{
  a: {},
  b: {},
  c: {},
}

game_2 store:

{
  a: {},
  b: {},
  c: {},
}

shared store:

{
  game_1: {
    a: {},
    b: {},
    c: {},
  },
  game_2: {
    a: {},
    b: {},
    c: {},
  },
}