React-redux中的连接点是什么?

时间:2018-07-22 21:26:27

标签: react-redux

我有此代码:

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

0 个答案:

没有答案