1
React、Redux（Thunk）、Axiomを持つサーバー上のブラウザにHTMLを送信する前に、ストアを満たすアクションをディスパッチしようとしています。私server.jsxでRedux async SSR：データを取得した後にストアを空にする
server.jsx
/* ... */
const currentRoutes = routes.filter(route => matchPath(req.url, route));
const promises = currentRoutes.map((route) => {
let fetchData = route.component.fetchData;
return fetchData instanceof Function ? fetchData(store) : Promise.resolve(null)
});
// Check promises
Promise.all(promises)
.then(response => {
const context = {};
const markup = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
</Provider>
)
const stylesheet = renderToString(
<link rel="stylesheet" href="/static/styles.css" />
);
const helmet = Helmet.renderStatic();
res.status(200).send(Template({
markup: markup,
helmet: helmet,
initialData: serialize(store.getState()),
stylesheet: (process.env.NODE_ENV == 'development') ? '' : stylesheet
}))
})
.catch(err => {
console.log('error', err);
})
/* ... */
、私はその後、私は、ルート要素の静的なFetchData機能に派遣しています、一致するルートに
を探しています。結果をpromisesというconstにマッピングしています。
私は約束を確認し、renderToString（）で静的ページを作成し、それをシリアル化した後、テンプレート（）関数でデータを送信します。
しかし、私は私の窓の変数に受信したすべての減速から、私の初期状態である。ここでは
<script>
window.__PROPS__ = {"experiences":{"fetching":true,"fetched":false,"all":[]}}
</script>
は、関連するコード・ビットです：
アクション
const fetchExperiences =() => {
return function(dispatch) {
dispatch({ type: "FETCH_EXPERIENCES_START" });
axios.get(config.api.baseUrl+'/experiences/rows?order[start_date]=DESC')
.then((response) => {
let data = response.data && response.data.data;
dispatch({ type: "FETCH_EXPERIENCES_FULFILLED", payload: data })
})
.catch(err => {
dispatch({ type: "FETCH_EXPERIENCES_REJECTED", payload: err })
})
}
}
構成要素
class Home extends React.Component {
static fetchData (store) {
return store.dispatch(fetchExperiences());
}
/* ... */
}
お返事をお待ちしております - あらかじめありがとうございます！