mapStateToProps 的 React/Redux Connect 问题

Question

我有以下 React 组件

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

import Product from './product';
import { openPaymentModal } from '../../../state/modalActions';
import { fetchAccountProducts } from '../../../lib/ecApi';
import { fetchChargifyCallById } from '../../../lib/chargifyApi';
import { filterProductsForUser, prepProducts } from '../../../_helpers';


class Products extends Component {
  constructor () {
    super();

    this.state = {
      products: [],
      currentProduct: '',
      showSuccess: false,
    }
  }

  componentDidMount() {
    const { location, user } = this.props;

    fetchAccountProducts()
      .then(this.addBasicProduct)
      .then(this.filterProducts(user));

    this.checkChargifyCall(location.query, user);
  }

  addBasicProduct(products) {
    return prepProducts(products);
  }

  filterProducts(user) {
    return products => {
      this.setState({products: filterProductsForUser(products, user)});
    }
  }

  checkChargifyCall (query, user) {
    if (_.isEmpty(query)) {
      const currentProduct = this.determineProduct(user);
      this.setState({currentProduct});
      return;
    }

    fetchChargifyCallById(query.call_id).done(data => {
      const { product } = data.response.signup;
      const { errors } = data.response.meta;

      if (query && query.status_code !== '200') {
        this.props.dispatch(openPaymentModal(
          product.handle,
          errors,
        ));
      } else {
        this.setState({
          currentProduct: product.handle,
          showSuccess: true
        });
      }
    });
  }

  determineProduct(user) {
    const subscription = user.chargifySubscriptions[0];

    if (subscription && subscription.product) {
      return subscription.product.handle;
    }

    return this.state.currentProduct;
  }

  render () {
    let calloutEl = (
      <div className='callout success'>Success!</div>
    );

    return (
      <div className="row medium-up-2 large-up-3 products-row">
        {this.state.showSuccess && calloutEl}
        {this.state.products.map((object, i) => {
          return <div className="column"><Product
            price={object.price}
            name={object.name}
            interval={object.interval}
            intervalUnit={object.interval_unit}
            isPaid={object.require_credit_card}
            description={object.description}
            handle={object.handle}
            key={i}
            currentProduct={this.state.currentProduct} /></div>;
        })}
      </div>
    );
  }
}

const mapStateToProps = state => ({user: state.user});

export default connect(mapStateToProps)(Products);

我遇到的问题是，如果我在我的componentDidMount 方法中使用console.log(this.props.user)，它是reducer 的初始状态与完全传播的用户状态。为什么会发生这种情况？我对 React/Redux 还很陌生，所以我为无知道歉

Answer 1

答案：是reducer的初始状态。 原因 reducer 代表一个状态。并请您的承诺中间人处理您的数据获取。 我遇到的问题是，如果我 console.log(this.props.user) 在我的 componentDidMount 方法 >，它是来自 reducer 的初始状态 vs 完全传播的用户状态。为什么会发生这种情况？我对 React/Redux 还很陌生，所以我为无知道歉。

connect 是一个高阶组件，它将数据传递给您的容器组件。在您的情况下，产品组件从连接接收状态作为道具

---

const mapStateToProps = state => ({user: state.user}); //你想要的状态

导出默认连接（mapStateToProps）（产品）； //用户作为产品组件的状态。

---