2

次のような Forecast という最もスマートなコンポーネントがあるとします。

function mapStateToProps(state) {
  return {
    dates: state.getIn(['forecast', 'dates']),
    isFetching: state.getIn(['forecast', 'isFetching'])
  };
}

export default connect(mapStateToProps, {
  fetchForecast
})(Forecast));

次のように Forecast コンポーネントをラップします。

import { getSummary, getDayForecast } from '../selectors/selectors';
export default class Forecast extends Component {

  render() {
    const { dates, isFetching } = this.props;

    return (
      <div className="row">
        {dates.map(date => (
          <Weather
            key={date}
            date={date}
            getSummary={getSummary}
            getDayForecast={getDayForecast}
          />
       ))}
      </div>
    );
  }
};

ここでは、2 つのセレクターを props としてWeatherコンポーネントに渡しています。セレクターは次のようになります。

import { createSelector } from 'reselect';
import moment from 'moment';
import { fromJS } from 'immutable';

const getDay = (state, key) => state.getIn(['forecast', 'forecast']).find(x => x.get('id') === key);

export const getSummary = createSelector(
  [getDay],
  (day => {
    const firstPeriod = day.get('periods').first();

    return fromJS({
      date: day.get('date'),
      outlook: firstPeriod.get('outlook'),
      icon: firstPeriod.get('icon')
    });
  })
);

export const getDayForecast = createSelector(
  [getDay],
  (day) => day.get('periods').map(period => fromJS({id: period.get('id') }))
);

これらのセレクターを props として渡す必要はありません。天気コンポーネントで簡単に参照できますが、天気コンポーネントもダムであり、そうしないため、天気コンポーネントでこれらのセレクターをどのように使用するかについて混乱しています状態への参照があります。子コンポーネントが呼び出したり、小道具を受け取ったりする上部に、コンテナまたはスマートコンポーネントが1つだけ必要です。

これを機能させる唯一の方法は、WeatherContainer次のような中間コンポーネントを使用することです。

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import Weather from '../components/Weather';

import { getSummary, getDayForecast } from '../selectors/selectors';

function mapStateToProps(state, ownProps) {
  return {
    summary: getSummary(state, ownProps.date),
    detail: getDayForecast(state, ownProps.date)
  };
}

export default(connect(mapStateToProps,{}))(Weather);

そして、私は次のように呼び出します：

    {dates.map(date => (
      <WeatherContainer
         key={date}
         date={date}
         getSummary={getSummary}
         getDayForecast={getDayForecast}
         />
    ))}

このようなコンテナ コンポーネントを作成しなければならないというのは、まったく間違っているように思えます。

ダムコンポーネントでセレクターを使用するにはどうすればよいですか?または、状態への参照も必要であることを念頭に置いて、セレクターを小道具として渡すにはどうすればよいですか?

4

1 に答える 1