Question

我是React的新手。我有两个兄弟组件Top Bar和Home（根据redux doc，redux可用于在组件之间共享状态）。和用于处理动作的动作fil。和化简器，用于管理逻辑。我的问题是，一个组件调度一个动作，另一个组件接收更新，但不渲染。但是调用分派操作的组件可以工作。在我的控制台中没有显示错误。我使用独立于化简器的不变模式来处理逻辑。

react文档指出，请远离以下功能 componentWillReceiveProps（）和componentWillUpdate（）

Tob Bar.js

class TopBar extends React.Component {



    constructor(props) {
        super(props);

    }

    render() {

        return (
            <div>
              <IconButton color="inherit">
                 <Badge badgeContent={this.props.cart.length} >
                       <ShoppingCart />
                   </Badge>
                </IconButton>

            </div>
        )
    }
}

const mapStateToProps =(state)=>{
   // here I get the update but not render
    return{
        'cart':state.ItemReducer.cart
    }
}

export default connect(mapStateToProps)(withStyles(Styles)(TopBar))

Home.js

布局组件作为父组件

       class Home extends Component {

        addToCart(event,item){
            this.props.addToCart(item);
        }

         render() {

            return (
              <Layout>
                <IconButton className={classes.icon} onClick={(e)=>{addtoCart(e,tile)}}> <ShoppingCart /></IconButton>
             </Layout>
            )
        }
    }

const mapStateToProps =(state)=>{

    return{
        'items':state.ItemReducer.items,
        'cart':state.ItemReducer.cart
    }
}

export default connect(mapStateToProps,actions)(withStyles(Styles)(Home));

Layout.js

class Layout extends Component {

    render() {
        return (
            <div>
                <TopBar {...this.props} />
                {this.props.children}
            </div>
        )
    }
}

export default Layout;

Action.js

  export function addToCart(item){
      return (dispatch)=>{
        dispatch({type:'ADD_CART',item:item})
      }
  }

Reducer.js

let initState = {
    'items': [],
    'cart':[]
};

const ItemReducer = (state = initState, action) => {
    switch (action.type) {
        case 'ADD_CART':

            let cart = {...state}.cart;
            for(var i in cart){
                if(cart[i].product_id === action.item.product_id){
                    return{
                        ...state
                    }
                }
            }

             cart.push(action.item)

            return{
                ...state,
                'cart':cart
            }
   }
}

通过Redux分派的React / Redux Update同级组件

0 个答案: