我的策略是在Component的componentDidMount方法中使用webpack的require.这是我的尝试：

componentDidMount() {
  require.ensure([ 'local/relative/path/to/lib/brav1toolBox.js'],function(require) {
    var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js');
  });
}

这会导致以下错误.

Uncaught (in promise) ReferenceError: Brav1ToolBox is not defined

所以正在加载Flowtime但无法找到Brav1ToolBox.

我对React或webpack都没有经验,所以也许我有一个误解.我试图使用webpack只加载那些库,如果我的用户访问需要这些库的路径. This is the webpack guide我用作参考.

感谢您的帮助.

对于webpack v2,我建议查看Webpack documentation.

使用webpack 2,您可以在需要它们的反应容器/组件中需要库,然后根据路径动态加载代码.您可以通过两个示例路由使用react-router执行此操作的示例,例如： “/ home”和“/ about”,如下：

<Route path="/home" getComponent={(nextState,callback) => {
    require.ensure([],require => {
        callback(null,require("./containers/home"));
    },"Home");
}} />
<Route path="/about" getComponent={(nextState,require("./containers/about"));
    },"About");
}} />

import React,{ PropTypes } from ''react''
import ReactDOM from ''react-dom''
import { createStore,combineReducers } from ''redux''
import { Provider } from ''react-redux''
import createbrowserHistory from ''history/lib/createbrowserHistory''
import { Router,Route } from ''react-router''
import { syncReduxAndRouter,routeReducer } from ''redux-simple-router''
import reducers from ''./reducers''

import App from ''./containers/app.jsx''
import About from ''./about.jsx''
import Dashboard from ''./dashboard/index.jsx''

const reducer = combineReducers(Object.assign({},reducers,{
    routing: routeReducer
}))
const store = createStore(reducer)
const history = createbrowserHistory()

syncReduxAndRouter(history,store)

const routes = {
  path: ''/'',component: App,childRoutes: [
    { path: ''about'',component: About },{ path: ''dashboard'',component: Dashboard }
  ]
}

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} history={history} />
    </Provider>,document.getElementById(''app'')
)

这似乎是我可以收集的相当标准.但是,我对如何从App下载道具,例如Dashboard组件感到有点困惑.这是App组件：

import React,{PropTypes} from ''react''
import {bindActionCreators} from ''redux''
import {connect} from ''react-redux''
import {Link} from ''react-router''

import * as authActions from ''./../actions/auth''

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/dashboard">Dashboard</Link>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

App.propTypes = {
    authActions: PropTypes.object.isrequired,authState: PropTypes.object.isrequired
}

function mapStatetoProps(state) {
    return {authState: state.authState}
}

function mapdispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions,dispatch)
    }
}

export default connect(mapStatetoProps,mapdispatchToProps)(App)

对不起,代码不是更简洁,但我特别试图将authState(从我的Reducer)传递到Dashboard组件,我对React Router和redux-simple的工作原理有点困惑-router libs …

编辑：

我更改了仪表板组件以将其包含在底部：

Dashboard.propTypes = {
    authActions: PropTypes.object.isrequired,mapdispatchToProps)(Dashboard)

我现在可以访问Redux状态和操作.我不确定这是不是正确的方法,但它现在有用……

<Route path=''/'' component={App}>
        <IndexRoute component={Home} />
        <Route path=''about'' component={About} />
        <Route path=''dashboard'' component={Dashboard} customprop="Hello,it''s me" />
        <Route path="*" component={NoMatch} />
</Route>

在仪表板组件中：

this.props.route.customprop => “你好,这是我”

要访问当前路径树中的所有路径,可以遍历this.props.routes(最深路径是最后一个).

我知道我需要检查我的access_token是否过期,然后使用refresh_token请求新的.好的……但什么时候应该刷新它？ 401发生之后或者当需要授权的某些API请求准备就绪时(发送前)？

我也知道如何使用HTTP拦截器在发送或检测401响应之前获取所有API请求.
问题是我很困惑如何解决Redux流程中的问题.如何“冻结”令牌刷新时间的请求？或者当我在401响应中解决问题时如何重复请求？

每当获取access_token以获取数据时(你应该使用fill_token填充来增强/包装fetch),你将检查expires_in是否即将到期(不到1分钟,或你感觉舒服),然后我们使用refresh_token请求新的的access_token.当然,我们还必须将新结果更新到存储.

伪代码：

function getToken() {
    const expiresIn = storage.getItem(KEY_EXPIRES_IN);
    const accesstoken = storage.getItem(KEY_ACCESS_TOKEN);
    if (accesstoken
        && (!expiresIn || moment.unix(Number(expiresIn)).diff(moment(),''minute'') > 1)) {
        return accesstoken;
    }
    return refreshToken();
}

每次向服务器发出请求时,都会调用上面的函数.

P / S：您可能希望将其作为与isomorphic-fetch一起使用的承诺