Question

我目前正在使用Redux和React构建仪表板。我还在实施react-router和redux-router，以便在用户未登录时重定向用户。

我不确定应用启动后获取用户数据的建议位置是什么。如果存在cookie，我只想获取用户（我们不会使用SSR）。

检查Cookie是否存在以及获取用户数据（并更新应用程序状态）的最佳时刻是什么？

由于某些路由不适用于未经过身份验证的用户，因此我认为应在路由器中检查身份验证。但是，我不确定最好的地方是什么（也许是onEnter）？

帮助将不胜感激！

感谢。

Answer 1

最好建议将api调用与其他操作一起使用。 https://github.com/reactjs/redux/issues/291给出了一个很好的解释。

Answer 2

我相信Stack Overflow的答案正是我所寻找的：Where do I fetch initial data from server in a React Redux app?

在我刚刚获取初始状态时，确实不需要涉及组件。

Answer 3

我不知道你的后端是什么，但我过去常常在HeaderDataFrame|DataDataFrame中打印初始状态（用户数据，初始配置等）作为HTML变量并将其用作redux的初始状态：

MainLayout.jsx （这在后面运行）

javasscript

<强> index.js

'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;

<强> store.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
);

在应用启动时，使用Redux获取用户数据的推荐位置是什么？

3 个答案: