React with Reduxの初期状態は機能していません

Question

React with Reduxの初期状態に問題があります。これは、非同期呼び出しを使用する私の最初のアプリケーションで、私は理解できないいくつかのものがあるようです。

Googleのスプレッドシートを「バックエンド」として使用しているため、私の親戚が私たちのスキーロッジをレンタルするのは簡単です。それは週のスプレッドシートであり、利用可能であるかどうかはわかりません。

コンソールを見ると、データが取得されますが、何かが機能していません。ここで

はエラーメッセージです：ここで

Error message

はgithubのレポです：https://github.com/Danielbook/kulan2016

そして、ここでは、コードは次のとおりです。

index.js

import About from './components/About'; 
import Guest from './components/Guest'; 
import Booking from './containers/Booking'; 

import getSpreadsheetData from './actions' 

const logger = createLogger(); 
const store = createStore(
    rootReducer, compose(
    applyMiddleware(thunk, promise, logger), 
    window.devToolsExtension ? window.devToolsExtension() : f => f) 
); 

const tableUrl = "https://spreadsheets.google.com/feeds/list/1QxC20NcuHzqp1Fp7Dy2gpBDbJzN4YpmjiEcr7PSpsuM/od6/public/basic?alt=json"; 

store.dispatch(getSpreadsheetData(tableUrl)); 

// Create an enhanced history that syncs navigation events with the store 
// const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home}/> 
      <Route path="/about" component={About}/> 
      <Route path="/guest" component={Guest}/> 
      <Route path="/booking" component={Booking}/> 
     </Route> 
     </Router> 
    </Provider>, 
    document.getElementById('app') 
); 

私は、エラーメッセージから見ることができるように0

減速-bookingdata.js

const initialState = { 
    spreadsheetData: [], 
    loading: false, 
    errorMsg: '' 
}; 

export default function spreadsheet(state = initialState, 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 
     }; 

    default: 
     return state; 
    } 
} 

予約-actions.js

import fetch from 'isomorphic-fetch'; 

// --- 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(tableUrl) { 
    // Code related to API here. Should just return a promise. 
    return fetch(tableUrl); 
} 

// --- Thunks --- 
export default function getSpreadsheetData(tableUrl) { 
    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. 
    // Here, we update the app state with the results of the API call. 
    return fetch(tableUrl) 
     .then(response => response.json()) 
     .then(data => dispatch(receiveSpreadsheet(data.feed.entry)), 
       error => dispatch(receiveSpreadsheetError(error))); 
    } 
} 

Booking.js

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {Grid, Table} from 'react-bootstrap'; 
import TableRow from '../components/TableRow'; 

class Booking extends Component { 
    constructor(props) { 
    super(props); 

    } 
    render() {  
    return (
     <Grid fluid className="pageContainer"> 
     <h4>För att boka, skicka ett mail till oss <a href="mailto:boka@kulaniklappen.se">här!</a></h4> 
     <p>{this.props.errorMsg}</p> 
     <Table responsive> 
      <thead> 
      <tr> 
      <th>Ledighet</th> 
      <th>Vecka</th> 
      <th>Datum</th> 
      <th>Pris</th> 
      </tr> 
      </thead> 
      <tbody> 
      {this.props.spreadsheetData.map((row, i) => { 
       return (
       <TableRow key={i} data={row} /> 
      ) 
      })} 
      </tbody> 
     </Table> 
     </Grid> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    console.log(state); 
    return { 
    spreadsheetData: state.spreadsheetData, 
    loading: state.loading, 
    errorMsg: state.errorMsg 
    } 
}; 

export default connect(mapStateToProps, null)(Booking); 

Answer 1

あなた状態構造は

です

{ 
    bookingData: { 
     spreadsheetData: ..., 
     loading: ..., 
     errorMsg: ... 
    }, 
    ... 
} 

そして、あなたのmapStateToPropsは

const mapStateToProps = (state) => { 
    console.log(state); 
    return { 
     spreadsheetData: state.bookingData.spreadsheetData, 
     loading: state.bookingData.loading, 
     errorMsg: state.bookingData.errorMsg 
    } 
};