Redux不工作时React的初始状态

Question

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

我用谷歌的电子表格作为我的"后台"，这样我的亲戚就可以很容易地把我们的滑雪小屋租出去。它只是一个星期的电子表格，如果他们可用或不。

通过查看控制台，获取了数据，但是有些东西不工作。

错误信息如下:

错误消息

这里是github的repo: 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')
);

reducer-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;
  }
}

booking-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:[e-mail]">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
    }
};