Как правильно использовать react-router и redux в одностраничном приложении?

Question

[dprx]

Вводные:
Есть простая браузерная игра на react, которая состоит из 3 частей - главная страница и два разных режима игры.
Сейчас это просто 3 отдельных html страницы, в которых загружаются три разных приложения react (3 webpack entry point).
В каждой странице стейт хранится в redux store, причём стейтом полностью управляет сервер - на каждое действие в приложение приезжает новый полный стейт игры, который заменяет текущий стейт в root reducer (спорный момент, но не о нём вопрос).

Хочется сделать из трёх приложений одно полноценное SPA (видимо с использованием react-router).
Я понимаю как сделать эту навигацию, но не понимаю что делать с redux store и стейтами. Стейты трех частей приложения абсолютно разные.

Логика работы следующая - пользователь находясь на главной странице отправляет запрос, например POST /game/create, в ответ на что ему с сервера приезжает id только что созданной игры с помощью которого можно получить стейт игры (ну, или сразу приезжает стейт новой игры).
Каковы мои дальнейшие действия с этими данными, что бы показать пользователю экран с игрой?

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: {},
  },
}

Comments

[dprx]

А в чем вопрос? Не знаете как хранилище объединить?

Я недавно в экосистеме реакта, поэтому пока не понимаю как правильно использовать инструментарий.

Т.е. объединить стейты в одном сторе мне в голову пришло, но во-первых я действительно не понимаю как это правильно сделать с роутером, а во-вторых не понимаю правильный ли это подход в целом.

В интернете все почему-то делают todo app, и никто не делает игр, даже подсмотреть не у кого.

[Антон Спирин]

dprx, а в чем с роутером проблемы? Тут все просто. Делаете стартовую страницу:

class App extends React.Component {
  render() {
    return (
      <div>
        <nav>
          <Link to="/game1">Game1</Link>
          <Link to="/game2">Game2</Link>
        </nav>
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/game1" component={Game1} />
            <Route path="/game2" component={Game2} />
          </Switch>
        </main>
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
)

Пользователь кликает по ссылке и монтируется компонент с нужной игрой, в CDM инициируется запрос и тд.

[Сергей]

Еще добавлю что стейтом можно управлять от так назваемого root редьюсера. На все приложение 1 стейт, но для каждой игры будет независимый обьект. Дальше делаете нужные экшены на каждую игру и все. 3 приложения поддерживать это конечно не целесообразно

import { combineReducers } from 'redux';

import game1 from './game1';
import game2 from './game2';

export default combineReducers({
  game1,
  game2
})

[dprx]

Антон Спирин, Сергей,
У меня есть shared state с двумя ключами под два режима игры, а как с этим стейтом быть в компонантах? Я вот о чём.
У меня есть компонент, который используется в обоих режимах, допустим UserInfo.

class UserInfo extends React.Component {
    render (
        return <div>{ this.props.userName }, { this.props.userLevel }</div>
    )
}

Что должно быть в mapStateToProps? Ведь теперь информация для компонента хранится в разных ключах shared state'а.
Как получить в компонент не весь state, а только нужный кусок? Делать через передачу props из родителя?
Раньше я мог написать просто:

function mapStateToProps(state) {
    return {
        userLevel: state.game.userLevel
    }
}