0

在过去的几天里，我正在潜入“react-redux-webpack”世界，愿意尝试一下并创建一个登录模板。

我已经注入 React Hot Loader 以实现快速视图更新，但它只更新视图以在“requireAuth”部分中解包。

我正在使用componentWillUpdate并componentWillMount检测登录更改。所以我想知道 React Hot Loader 无法将更改推送到视图的原因是什么？因为我看到新数据（在 IDE 中更改/保存后）被拉到浏览器（在 chrome 网络检查器内）。

我将不胜感激，因为我已经尝试过我的想法，但显然在 redux 世界中的两天还不足以快速解决这个问题））

这是我在教程的帮助下构建的“需要身份验证”组件，该组件适用于其目的：

import React, {Component} from 'react';
import {connect} from 'react-redux';

export default function (ComposedComponent) {
  class Authentication extends Component {

    // to receive access to ROUTER >>>
    static contextTypes = {
      router: React.PropTypes.object
    };

    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/');
        alert("Please, SIGN IN to continue!");
      }
    };

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/');
        alert("Come back soon :)");
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  function mapStateToProps(state) {
    return {authenticated: state.authenticated};
  }

  return connect(mapStateToProps)(Authentication);
}

并使用包装的“资源”组件查看，该组件仅在登录后可用：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import {Router, Route, browserHistory} from 'react-router';


import requireAuth from './components/require_authentication';
import App from './components/app';
import Resources from './components/resources';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory}>

      <Route path="/" component={App}>
        <Route path="resources" component={requireAuth(Resources)} />
      </Route>
    </Router>
  </Provider>
  , document.getElementById('root'));
4

0 回答 0