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

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

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

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

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';

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

Unexpected token =

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

import {ReduxRouter} from 'redux-router';

Я получил:

Uncaught SyntaxError: The requested module '../../node_modules/redux-router/lib/index.js' does not provide an export named 'ReduxRouter'

И если:

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

Затем:

Uncaught SyntaxError: Unexpected token export

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

Так:

  1. Как правильно импортировать?
  2. Могу ли я использовать redux-router в полимерное приложение (без реакции), если мне нужно хранить только все маршруты а история в гос?
  3. Какие еще у меня есть варианты. Вы знаете кого-нибудь хорошие библиотеки для этого?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
492
1

Ответы 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-стартовый комплект - особенно посмотрите, как группа Polymer включила Redux и pwa-helpers / router.js для маршрутизации ...

Другие вопросы по теме