React / Redux Обновите одноуровневый компонент посредством переадресации - PullRequest
Новая
       7

React / Redux Обновите одноуровневый компонент посредством переадресации

0 голосов
/ 10 марта 2019

Я новичок в React. У меня есть два родственных компонента: Top Bar и Home (в соответствии с документом Dux, DUREX можно использовать для обмена состоянием между компонентами). и действия fil, которые используют для обработки действий. и редуктор, используйте для управления логикой. Моя проблема в том, что один компонент отправляет действие, а другой компонент получает обновление, но не выполняет рендеринг. но компонент, который вызывает диспетчерское действие, работает. в моей консоли покажи без ошибок. Я использую неизменный паттерн инди-редуктора для обработки логики.

Реактор отметил, что держаться подальше от следующих функций 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
            }
   }
}

1 Ответ

0 голосов
/ 11 марта 2019

Я не думаю, что вы можете нажать непосредственно на объект 'cart', поскольку это изменяет состояние и не вызывает обновления.

Вам необходимо сначала (глубоко) клонировать объект корзины (IЯ использовал lodash здесь): 

case 'ADD_CART':

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

  cartClone.push(action.item)

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