Rex Redux JSON from Google Spreadsheet

Question

私たちのスキーロッジのWebページを作成して、人々に借りています。私は価格、日付とそれが特定の日付を借りて利用可能なとGoogleのスプレッドシートを持っている。

私の前のページは、TabletopJSでAngularJSで書かれており、スプレッドシートからデータを取得していましたが、TabletopJSを使わずにReactとReduxで書いた経験があると思いました。

Googleスプレッドシートから吐き出されたJSONのデータを取得するにはどうすればよいですか？私は非同期アクションのReduxチュートリアルを見てきましたが、私自身のコードで実装するのは難しいです。

どうすればいいですか？

編集：ここに私のangularjsコードです： 卓上-config.jsの

'use strict'; 

angular 
    .module('myApp') 
    .config(tableTopConfig); 

function tableTopConfig (TabletopProvider) { 
    TabletopProvider.setTabletopOptions({ 
    key: 'https://docs.google.com/spreadsheets/d/1GJHfKQy24BFKNkYVjCfFtar1OCd4vJ8_TvFRheMKH90/pubhtml', 
    simpleSheet: true 
    }); 
}  

bookingController.js

(function() { 
    'use strict'; 

    angular 
    .module('myApp') 
    .controller('bookingController', bookingController); 

    function bookingController($scope, Tabletop) { 
    var vm = this; 
    Tabletop.then(function(ttdata) { 
     vm.data = ttdata[0]; 
    }); 
    } 

})(); 

Answer 1

あなたは* redux-thunkまたはハンドルのようなものが必要になります非同期アクション。下記のfetchTable関数は、APIがスプレッドシートデータを取得するために更新する必要があります。

（*注：技術的にはあなたがredux-thunkなしで行うことができますが、それが唯一のより複雑になります。）

// actions/spreadsheet.js 
// --- Action-creators --- 
function requestSpreadsheet() { 
    return { 
    type: 'SPREADSHEET_REQUEST' 
    } 
} 


function receiveSpreadsheet(data) { 
    return { 
    type: 'SPREADSHEET_RECEIVED', 
    payload: { 
     data: data 
    } 
    } 
} 


function receiveSpreadsheetError(error) { 
    return { 
    type: 'SPREADSHEET_FAIL', 
    payload: { 
     error: error 
    } 
    } 
} 

// --- API --- 
function fetchTable(tableInfo) { 
    // Code related to API here. Should just return a promise. 
    // Someting like... 
    return fetch('spreadsheet url here') 
} 


// --- Thunks --- 
function getSpreadsheetData(tableInfo) { 
    return function (dispatch, getState) { 
    // Tell reducers that you are about to make a request. 
    dispatch(requestSpreadsheet()) 

    // Make the request, then tell reducers about 
    // whether it succeeded or not. 
    return fetchTable(tableInfo).then(
     data => dispatch(receiveSpreadsheet(data)), 
     error => dispatch(receiveSpreadsheetError(error)) 
    ) 
    } 
} 

その後、あなたはそれらのアクションをリッスン減速や減速機を持っているし、更新する必要がありますアプリケーション状態に応じて。アプリケーションの状態をどのように整形するかを考える必要があります。あなたのアプリケーションについては何も想定していません。

// reducers/spreadsheet.js 
const initialState = { 
    spreadsheetData: {} 
    loading: false, 
    errorMsg: '' 
} 

function spreadsheet(state = {}, action = {}) { 
    switch (action.type) { 
    case 'SPREADSHEET_REQUEST': 
     return { 
     ...state, 
     loading: true 
     } 

    case 'SPREADSHEET_RECEIVED': 
     return { 
     ...state, 
     loading: false, 
     spreadsheetData: action.payload.data, 
     errorMsg: '' 
     } 

    case 'SPREADSHEET_FAIL': 
     return { 
     loading: false, 
     errorMsg: action.payload.error 
     } 
    } 

} 

そして、あなたはあなたのビューロジックを持っている機能のアプリの状態を取り込んで表示したいHTMLを返すようにビュー全体を扱うこと反応します。 Reactコンポーネントがあなたのreduxのアプリケーション状態の変更を "聴く"ことができるようにするには、npm install --save react-reduxが必要です。

// containers/Spreadsheet.js 
import { connect } from 'react-redux' 
import SpreadsheetComponent from '../components/Spreadsheet' 

// This function tells your SpreadsheetComponent about the 
// parts of the app state that it should "listen" to. The 
// component will receive them as normal react props. 
// These fields can be named whatever is most convenient. 
function mapStateToProps(appState) { 
    return { 
    spreadsheetData: state.spreadsheetData, 
    loading: state.loading, 
    errorMsg: state.errorMsg 
    } 
} 

// 
export default connect(mapStateToProps)(SpreadsheetComponent) 

// components/Spreadsheet.js 
import React from 'react'; 

function Spreadsheet(props) { 
    return (
    <h1>Here is the spreadsheet!</h1> 
    <ul> 
     {props.spreadsheetData.map(row => { 
     return (
      <li> 
      <RowStuff row={row} /> 
      </li> 
     ) 
     })} 
    </ul> 
) 
} 

どのようにこれらすべてのものをまとめますか？

// configureStore.js 
import React from 'react' 
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux' 
import { render } from 'react-dom' 

import thunk from 'redux-thunk'; 
import App from './components/App' 

import rootReducer from './reducers/index'; 

const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 

render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
)