使用Redux-路由器与聚合物3应用程序

Question

聚合物应用程序使用redux存储应用程序的状态。这样做的目的是将所有路由存储在状态(见下图)。我想为此使用redux路由器，但当我尝试将库导入到我的应用程序时，我已经开始面临问题了。

​

​

我的导入代码如下所示：

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不提供名为“ReduxRouter”的导出

如果：

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

然后：

未登录的SyntaxError:意外的令牌导出

这个问题可以在启动聚合物3应用程序中再现。或者，我认为，在任何聚合物应用中。

所以：

1. 什么是正确的进口方式？
2. 如果我只需要在状态下存储所有的路由和历史，我可以在聚合物应用程序中使用redux-路由器(没有反应)吗？
3. 我还有别的选择吗。你知道有什么好的图书馆吗？

Answer 1

1.)尝试：

    import 'redux-router';

如果npm包具有默认导出，这将允许您在组件中引用它。如果没有，请尝试在index.html的末尾导入以下内容：

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

注: /dist/ not /src/

FYI，请确保以分号结束导入语句。你写道：

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

您的最后一行需要分号(可能是一个错误)。

2.)是的，这是可能的。

3.)查看pwa-启动器工具包 --特别是看看聚合物组是如何包含Redux和pwa-helpers/router.js的.