私は現在、ReduxとReactを使用してダッシュボードを構築しています。私はまた、ログインしていないユーザーをリダイレクトするために反応ルータと還元ルータを実装しています。アプリの起動時にReduxを使用してユーザーデータを取得するには、どのような場所をお勧めしますか？
アプリの起動後にユーザーデータを取得することをお勧めします。私はクッキーが存在する場合（SSRを使用するつもりはない）のみユーザーを取得したいと思います。
クッキーの存在を確認し、ユーザーデータを取得して（アプリケーションの状態を更新する）最も良い瞬間は何ですか？
認証されていないユーザーには使用できないルートがあるため、ルーターで認証を確認する必要があります。しかし、私はこれを行うための最良の場所は何か（おそらくonEnter）がわからないのですか？
ご了承ください。
ありがとうございました。
私は、このスタックオーバーフローの答えは、私が探していたものであると信じて：Where do I fetch initial data from server in a React Redux app?
私は初期状態を取得していながら、関与するコンポーネントの必要は本当にありません。
私はあなたのバックエンドだか分からないが、私はjavasscript変数とReduxのための初期状態として使用することをとしてHTML初期状態（ユーザデータ、初期設定、など）を印刷するために使用：
MainLayout.jsx（これは裏で実行）
'use strict';
const React = require('react');
const Component = React.Component;
const PropTypes = React.PropTypes;
class MainLayout extends Component {
render() {
const assets = this.props.assets;
const initialState = {
entities: {
users: {}
},
authentication: null
};
if (this.props.session) {
initialState.entities.users[this.props.session.id] = this.props.session;
initialState.authentication = {};
initialState.authentication.id = this.props.session.id;
}
return (
<html>
<head>
<title>{this.props.title}</title>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href={assets.vendor.css} />
<script
dangerouslySetInnerHTML={{
__html: `window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};`
}}
>
</script>
</head>
<body>
{this.props.children}
<script src={assets.vendor.js}></script>
{this.props.feet}
</body>
</html>
);
}
}
MainLayout.propTypes = {
children: PropTypes.node.isRequired,
title: PropTypes.string.isRequired,
feet: PropTypes.object.isRequired,
assets: PropTypes.object.isRequired,
session: PropTypes.object
};
module.exports = MainLayout;
index.js
import React from 'react';
import { render } from 'react-dom';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from './store';
import routes from './routes';
import App from './containers/App';
const loadauthenticationData =() => {
if (__INITIAL_STATE__ !== null) {
return __INITIAL_STATE__,
};
}
return {};
};
const store = configureStore(loadauthenticationData());
const syncedHistory = syncHistoryWithStore(browserHistory, store);
const rootElement = document.getElementById('app');
render(
<App
history={syncedHistory}
store={store}
routes={routes}
/>,
rootElement
);
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import api from './middlewares/api';
import reducers from './reducers';
const middlewaresCreateStore = compose(
applyMiddleware(thunk, api),
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
const configureStore = (initialState) => middlewaresCreateStore(
reducers(initialState),
initialState
);
export default configureStore;
最高の他のアクションと一緒にあなたのAPI呼び出しを置くことが示唆されます。 https://github.com/reactjs/redux/issues/291は同じことについて素敵な説明をしてくれます。
ありがとうございます！私はサーバーサイドレンダリングを使用していない、私はこのクライアント側を処理する方法を探していた:) – Vernon