Next.js和Redux-Observable。手柄getInitialProps

我在尋找例如要求我如何使用getInitialProps鉤Next.js的處理Redux的可觀測 AJAX史詩。它甚至有可能嗎？Next.js和Redux-Observable。手柄getInitialProps

換句話說 - 如何在getInitialProps利用此：

import { ajax } from 'rxjs/observable/dom/ajax'; 

// action creators 
const fetchUser = username => ({ type: FETCH_USER, payload: username }); 
const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload }); 

// epic 
const fetchUserEpic = action$ => 
    action$.ofType(FETCH_USER) 
    .mergeMap(action => 
     ajax.getJSON(`https://api.github.com/users/${action.payload}`) 
     .map(response => fetchUserFulfilled(response)) 
    );

...所以我可以在服務器上獲取初始數據。

Google文檔getInitialProps

來源

2017-09-23 Tomasz

要使用Redux的可觀測與之反應你的UI組件將派遣平原的行動，你的史詩隨後將聽取和迴應。因此，您的組件沒有redux-observable的直接知識 - 它們只是派發操作並連接到商店以接收狀態更改。

下面是從文檔的簡單JSBin例如：https://jsbin.com/jexomi/edit?js,output

const App = ({ isPinging, ping }) => (
    <div> 
    <h1>is pinging: {isPinging.toString()}</h1> 
    <button onClick={ping}>Start PING</button> 
    </div> 
); 

export defualt connect(
    ({ isPinging }) => ({ isPinging }), 
    { ping } 
)(App);

還有這裏稍微複雜一點的例子：https://github.com/redux-observable/redux-observable/tree/master/examples/redux-observable-shopping-cart

來源

2017-09-24 21:17:35 jayphelps

感謝您的回答，但是這是不幸的是沒有回答我的問題。我知道如何設置我的史詩將偵聽的操作，我的問題是我可以（以某種方式）使用它們與Next.js來獲取服務器上的初始數據。以下是[在Next.js中執行此操作的靜態方法的說明]（https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle） – Tomasz

[用數據提取數據的示例承諾]（https://github.com/zeit/next.js/blob/master/examples/data-fetch/pages/index.js） – Tomasz

Next.js和Redux-Observable。手柄getInitialProps

回答

相關問題