React中的初始状态与Redux不起作用

Question

React与Redux中的初始状态有问题。这是我第一次使用异步调用的应用程序，似乎有一些我无法弄清楚的东西。

我使用谷歌的电子表格作为我的“后端”，所以我的亲戚很容易租出我们的滑雪小屋。它只是一个星期的电子表格，如果它们可用或不可用。

通过查看控制台，数据被抓取，但某些内容不起作用。

以下是错误消息：

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') 
); 

减速器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 
    } 
};