ここ数日間、「react-redux-webpack」の世界に飛び込んでいます。試して、ログイン用のテンプレートを作成したいと思っています。
ビューの高速更新が機能するようにReact Hot Loaderを注入しましたが、「requireAuth」部分でラップされていないビューのみを更新します。
ログインの変更を検出するためにcomponentWillUpdate
andを使用しています。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'));