Используйте Redux-router с приложением Polymer 3

Полимерное приложение использует redux для хранения состояния приложения. Идея состоит в том, чтобы сохранить всю маршрутизацию в состоянии (см. Изображение ниже). Я хочу использовать для этого redux-router, но я начал сталкиваться с проблемами уже в самом начале, когда пытаюсь импортировать библиотеку в свое приложение.

введите здесь описание изображения

Код моего импорта выглядит так:

import { createStore, compose as origCompose, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer';
import {ReduxRouter} from '../node_modules/redux-router/src/ReduxRouter.js'



import app from './reducers/app.js';
import route from './reducers/route.js';
import user from './reducers/user.js';
import events from './reducers/events.js';

Ошибка, которую я получаю с этим импортом:

Неожиданный токен =

Если я попытаюсь импортировать вот так:

import {ReduxRouter} from 'redux-router';

Я получил:

Uncaught SyntaxError: запрошенный модуль '../../node_modules/redux-router/lib/index.js' не предоставляет экспорт с именем 'ReduxRouter'

И если:

import {ReduxRouter} from '../node_modules/redux-router/src'

Потом:

Uncaught SyntaxError: неожиданный экспорт токена

Проблема может быть воспроизведена в приложении Starter Polymer 3. Или, я думаю, в любом полимерном приложении.

So:

  1. Как правильно импортировать?
  2. Могу ли я использовать redux-router в полимерном приложении (без реакции), если мне нужно только сохранить все маршруты и историю в состоянии?
  3. Какие еще у меня есть варианты. Вы знаете какие-нибудь хорошие библиотеки для этого?

person Artur Takoev    schedule 08.08.2018    source источник


Ответы (1)


1.) Попробуйте:

    import 'redux-router';

Если пакет npm имеет экспорт по умолчанию, это должно позволить вам ссылаться на него в компоненте. Если нет, попробуйте импортировать это в конец index.html где-нибудь перед, например:

    <script src="node_modules/redux-router/dist/ReduxRouter.js"></script>
    ...
    </body>

Примечание. / dist / не / src /.

К вашему сведению, убедитесь, что вы заканчиваете свой оператор импорта точкой с запятой. Вы написали:

    import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer';
    import {ReduxRouter} from '../node_modules/redux-router/src/ReduxRouter.js'

В вашей последней строке нужна точка с запятой (возможно, это опечатка).

2.) Да, это возможно.

3.) Ознакомьтесь с pwa-starter-kit - особенно посмотрите, как Группа Polymer включила Redux и pwa-helpers / router.js для маршрутизации ...

person Community    schedule 09.08.2018