6

我希望我的基于 React 的 SPA 在服务器端呈现（现在不是）。因此，我想将 React 与react-router、redux和一些构建层（如isomorphic starterkit ）结合起来。

有hapi 通用 redux将所有内容连接在一起，但我正在为如何组织我的流程而苦苦挣扎。我的数据来自 REST API 的多个端点。不同的组件有不同的数据需求，应该在客户端及时加载数据。相反，在服务器上，必须获取特定路由（组件集）的所有数据，并将必要的组件呈现为字符串。

SOME_DATA_ARRIVED在我的第一种方法中，我使用 redux 的中间件来创建异步操作，它加载数据、返回一个承诺，并在承诺解决时触发一个操作。Reducers 然后更新我的商店，重新渲染组件，一切都很好。原则上，这是可行的。但后来我意识到，在路由开始发挥作用的那一刻，流程变得很尴尬。

列出许多数据记录的某些组件具有多个链接来过滤记录。每个过滤后的数据集都应该可以通过它自己的 URL 访问，例如/filter-by/:filter. 所以我使用不同<Link to={...}>的组件来改变点击时的 URL 并触发路由器。然后路由器应该根据当前 URL 表示的状态更新存储，这反过来会导致相关组件的重新呈现。

这并不容易实现。我componentWillUpdate首先尝试触发一个操作，该操作异步加载我的数据、填充存储并导致我的组件的另一个重新渲染周期。但这在服务器上不起作用，因为只支持 3 种生命周期方法。

所以我正在寻找组织这个的正确方法。从用户角度更改应用程序状态的用户交互应更新 URL。IMO 这应该使路由器以某种方式加载必要的数据，更新存储，并启动协调过程。

所以interaction -> URL change -> data fetching -> store update -> re-render。

这种方法也应该在服务器上工作，因为从请求的 URL 中应该能够确定要加载的数据，生成initial state并将该状态传递给storeredux 的生成。但我没有找到一种方法来正确地做到这一点。所以对我来说，出现了以下问题：

  1. 我的方法是错误的，因为有些东西我还不明白/不知道吗？
  2. 在 redux 中保持从 REST API 加载的数据是否正确store？
  3. state让组件保留在 redux 中并由store其他人自己管理是不是有点尴尬state？
  4. 有这个想法是interaction -> URL change -> data fetching -> store update -> re-render错误的吗？

我愿意接受各种建议。

4

1 回答 1

4

我今天确实设置了完全相同的东西。我们已经拥有的是 react-router 和 redux。我们模块化了一些模块以将东西注入其中 - 而且 viola - 它可以工作。我使用https://github.com/erikras/react-redux-universal-hot-example作为参考。

零件：

1.路由器.js

我们返回 afunction (location, history, store)以使用 Promise 设置路由器。routes是包含所有组件的 react-router 的路由定义。

module.exports = function (location, history, store) {
    return new Bluebird((resolve, reject)  => {
        Router.run(routes, location, (Handler, state) => {
            const HandlerConnected = connect(_.identity)(Handler);
            const component = (
                <Provider store={store}>
                    {() => <HandlerConnected />}
                </Provider>
            );
            resolve(component);
        }).catch(console.error.bind(console));
    });
};

2. store.js

您只需将初始状态传递给createStore(reducer, initialState). 您只需在服务器和客户端上执行此操作。对于客户端，您应该通过脚本标记（即。window.__initialstate__）使状态可用。有关更多信息，请参阅http://rackt.github.io/redux/docs/recipes/ServerRendering.html。

3.在服务器上渲染

获取您的数据，使用该数据设置初始状态 ( ...data)。createRouter=router.js从上面。res.render正在快速渲染一个翡翠模板，内容如下

script.
    window.csvistate.__initialstate__=!{initialState ? JSON.stringify(initialState) : 'null'};
...
#react-start
    != html

var initialState = { ...data };
var store = createStore(reducer, initialState);
createRouter(req.url, null, store).then(function (component) {
    var html = React.renderToString(component);
    res.render('community/neighbourhood', { html: html, initialState: initialState });
});

4.适应客户端

然后，您的客户可以做基本相同的事情。location可能HistoryLocation来自 React-Router

const initialState = window.csvistate.__initialstate__;
const store = require('./store')(initialState);

router(location, null, store).then(component => {
    React.render(component, document.getElementsByClassName('jsx-community-bulletinboard')[0]);
});

要回答您的问题：

  1. 你的方法似乎是正确的。我们也这样做。甚至可以将 url 作为状态的一部分。
  2. redux store 中的所有状态都是一件好事。这样你就有了一个单一的事实来源。
  3. 我们仍在研究现在应该去哪里。目前我们请求componentDidMount服务器上的数据，它应该已经存在。
于 2015-09-01T13:40:49.677 回答