在渲染服务器端之前获取数据

Question

现在我发现了Este.js我对同构应用程序有一点问题。我不明白在使用 renderToString（） 渲染服务器端之前如何进行 api 调用。

一种解决方案是使用 React 路由器在路由器级别执行所有数据获取。根据顶级路由，我可以预测需要哪些数据，进行 api 调用，然后调用 React.renderToString。

太好了，但我仍然必须在组件级别和路由器级别声明数据依赖关系。我最终写了两次相同的代码，我不认为这是最好的方法。

编辑：好的，现在我可以做一些我想做的事。使用反应路由器和此链接，我已经能够执行以下操作：

给出这个全局应用程序状态，我想在指向/todos 时预取待办事项

初始状态.js

{
  auth: {
    data: null,
    form: null
  },
  examples: {
    editable: {
      state: null,
      text: 'Some inline-editable text.'
    }
  },
  i18n: {
    formats: {},
    locales: initialLocale,
    messages: messages[initialLocale]
  },
  pendingActions: {},
  todos: {
    editables: {},
    newTodo: {
      title: ''
    },
    list: [{
      id: 1,
      title: 'first todo yipiyo'
    }]
  },
  users: {
    viewer: null
  }
}

todos.react.js

在待办事项组件中，我声明了一个静态函数 fetchData。因为我想在我的appState中检索正确的键，所以我将"list"作为参数传递。感觉很脏。

class Todos extends Component {
  static fetchData(){
    return actions.loadAllTodos('list');
  }
  componentDidMount(){
    Todos.fetchData();
  }
  render() {
    ...
  }
}

操作.js

Api调用和东西，我传递承诺的钥匙 - 感觉很黑客

export function loadAllTodos(key) {
  const promise = new Promise((resolve, reject) => {
    Api.get()
    .then(res => {
      res.key = key; //hacky time
      resolve(res)
    })
    .catch(err => {
      reject(err);
    })
  });
  return dispatch(loadAllTodos, promise);
}

渲染.js

router.run((Handler, routerState) => {
  var promise = Promise.all(routerState.routes
        .filter(route => route.handler.fetchData)
        .map(route => {
          return route.handler.fetchData();
        })
      );
  promise.then(resp => {
    console.log(resp);
    //Displays : 
    [ { id: 2, title: 'Im a second todo' },{ id: 3, title: 'I like todo' },
    cursor: 'list' ]
    //Some stuff to add resp to appState, using the correct key, yey iso+api=win
    appState = mergeThisWithMagic(appState, resp);
    const html = preloadAppStateThenRenderHtml(Handler, appState);
    const notFound = routerState.routes.some(route => route.name ===
      'not-found');
    const status = notFound ? 404 : 200;
    res.status(status).send(html);
    resolve();
  });

});

如您所见，我将创建一个函数来使用更新的 todoList 更新 appState。

可以

做所有这些吗？我想得到一些反馈，因为我觉得我:(走上了一条黑暗的道路。

Answer 1

我在我的同构服务器端应用程序中实现了这一目标，方法是将我的 fetchData 函数放在组件的 statics 对象中，并使用等到返回所有数据后再将应用程序呈现为字符串的承诺。

然后，您将返回的数据通过 props 向下传递到渲染的组件。这个例子对我开发这个应用程序很有帮助。 反应路由器超级演示。