我有此代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class WeatherList extends Component {
renderWeather(cityData) {
const name = cityData.city.name;
return (
<tr key={name}>
<td> {name} </td>
</tr>
)
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temp</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
{this.props.weather.map(this.renderWeather)}
</tbody>
</table>
)
}
}
function mapStateToProps({ weather }) { // es6 shorthand. it's as if state was teh argument and { weather: state.weather } was in the return
return { weather };
}
export default connect(mapStateToProps)(WeatherList);
在最后一行,为什么我不能只写export default WeatherList
?由于mapStateToProps
函数对,状态在组件内部可用吗?那么connect
的意义是什么?
有关更多信息,我的减速器是这样的:
import { FETCH_WEATHER } from "../actions/index";
export default function(state = [], action) {
switch (action.type) {
case FETCH_WEATHER:
// return state.concat([ action.payload.data ]); // don't use push. concat creates a new array, while push mutates the old one. YOu want to create a new array, not mutate the old one.
return [ action.payload.data, ...state ];
}
return state;
}