阵营与mapStateToProps

Question

/Redux的连接问题，我有以下的阵营组件

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)，是从减速VS全传播的初始状态用户状态。任何可能发生这种情况的原因？我对React/Redux相当陌生，所以对于无知我表示歉意

Answer 1

答案：它是reducer的初始状态。 原因减速器代表了一个状态。并请您承诺处理您的数据提取。 我遇到的问题是，如果我的console.log（this.props.user）在我componentDidMount方法，是从减速器初始状态VS的完全传​​播用户状态。任何可能发生这种情况的原因？我对React/Redux相当陌生，所以我为无知道歉。

connect是一个将数据传递到容器组件的高阶组件。你的情况产品组件接收状态的道具从连接

---

常量mapStateToProps =状态=>（{用户：state.user}）; //你想要的状态

export default connect（mapStateToProps）（Products）; //用户作为您的产品组件的状态。

---