0

ここ数日間、「react-redux-webpack」の世界に飛び込んでいます。試して、ログイン用のテンプレートを作成したいと思っています。

ビューの高速更新が機能するようにReact Hot Loaderを注入しましたが、「requireAuth」部分でラップされていないビューのみを更新します。

ログインの変更を検出するためにcomponentWillUpdateandを使用しています。componentWillMountでは、React Hot Loader が変更をビューにプッシュできない理由は何でしょうか? 新しいデータ(IDEで変更/保存された後)がブラウザ(chromeネットワークインスペクタ内)にプルされることがわかったので。

私はすでに自分の考えを試していたので、ご意見をいただければ幸いです。

これは、その目的のために機能するチュートリアルの助けを借りて構築した「認証を必要とする」コンポーネントです。

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