Прямо сейчас я открываю для себя Este.js, и у меня небольшая проблема с изоморфными приложениями. Я не понимаю, как сделать вызов api перед рендерингом серверной части с помощью renderToString ().
Одно из решений состоит в том, чтобы выполнять выборку всех данных на уровне маршрутизатора с помощью React Router. В зависимости от маршрута верхнего уровня я могу предсказать, какие данные потребуются, сделать вызов api, а затем вызвать React.renderToString.
Отлично, но мне все равно нужно объявить зависимости данных на уровне компонентов И на уровне маршрутизатора. В итоге я дважды пишу один и тот же код и не верю, что это лучший способ сделать это.
РЕДАКТИРОВАТЬ: Хорошо, пока я могу делать то, что хочу. Используя React-Router и эту ссылку, я смог сделать следующее :
Предоставляя это глобальное состояние приложения, я хочу предварительно загружать задачи при указании / задачи
initialstate.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
В компоненте todo я объявляю статическую функцию fetchData. Поскольку я хочу получить правильный ключ в своем appState, я передаю list в качестве параметра. Ощущается грязным.
class Todos extends Component {
static fetchData(){
return actions.loadAllTodos('list');
}
componentDidMount(){
Todos.fetchData();
}
render() {
...
}
}
actions.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);
}
render.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();
});
});
Как видите, я создам функцию для обновления appState с помощью обновленного todoList.
Можно ли все это делать? Я хотел бы получить обратную связь, потому что я чувствую, что иду темным путем :(.
