не может получить обновленное состояние из магазина - PullRequest
Новая
       25

не может получить обновленное состояние из магазина

0 голосов
/ 05 августа 2020

# здесь я хочу выполнить действие Dispacth () над пропсами. Я считаю, что правильно подключил компонент. первый аргумент отображает состояние в свойства, второй - в отправку. Итак, когда я отправляю действие, я регистрирую getState и вижу, что хранилище обновлено. 

import React from "react";
import { Modal, Button } from "react-bootstrap";
import { connect } from "react-redux"


function AddCart(props) {

  console.log("AddCart Props", props);

  function handleClick(e) {
    e.preventDefault();
    props.addtocard()
    // props.addtocard((props.count * props.price))

  }

  return <Modal
    {...props}
    size="md"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton
    >
      <Modal.Title id="contained-modal-title-vcenter">
        Successful!
          </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <p>
        <b>count:{props.count} size:{props.size}  x   title:{props.title} price:{(props.count * props.price).toFixed(2)}</b> added to your cart!
          </p>
    </Modal.Body>

    <Modal.Footer >
      <Button className="edit-btn" onClick={props.onHide}>Close</Button>
      <Button className="edit-btn" href="/cart" onClick={handleClick}>Go to Cart</Button>
    </Modal.Footer>
  </Modal>
}


function mapDispatchToProps(dispatch, props) {
  return {
    addtocard: () => dispatch({ type: "ADD_ITEM", price: (props.count * props.price) })
  }

}

export default connect(null, mapDispatchToProps)(AddCart);

# мой редуктор находится ниже 

 const initState = {
        price: 35,
    
    
    }
    function cartReducer(state = initState, action) {
    
        switch (action.type) {
            case "ADD_ITEM":
                console.log("ITEMS ARE ADDED");
    
                return {
                    ...state,
                    price: action.price
                }
            default:
                return state;
        }
    }
    
    export default cartReducer;

#, и здесь я хочу получить обновленное состояние для реквизита, я считаю, что правильно подключил компонент. первый аргумент отображает состояние в свойства, второй - в отправку. Итак, когда я отправляю действие, я регистрирую getState и вижу, что магазин обновлен. 

 import Navigation from "../Components/Navbar/Nav"
    import React, { Component } from 'react';
    import { Container } from 'react-bootstrap';
    import SubTotal from '../Components/Cart/Subtotal/Subtotal';
    import OrderOnlineSaving from '../Components/Cart/OnlineOrderSaving/OnlineOrderSaving';
    import TaxesFees from '../Components/Cart/TaxAndFees/TaxAndFees';
    import EstimatedTotal from '../Components/Cart/EstimatedTotal/EstimatedTotal';
    // import ItemDetails from './components/ItemDetails/ItemDetails';
    // import PromoCodeDiscount from './components/PromoCode/PromoCode';
    import '../Components/Cart/Cart.css'
    // Import redux provider
    import { connect } from 'react-redux';
    // import { handleChange } from '../actions/promoCodeActions';
    // import store from "../store"
    
    class Cart extends Component {
    
    
      constructor(props) {
        super(props);
    
        this.state = {
          total: parseFloat(props.stateItem.cartItem.price),
          taxes: 0,
          onlineOrderSavings: 0,
          estimatedTotal: 0,
          disablePromoButton: false
        };
      }
    
    
      componentDidMount = () => {
        this.setState(
          { taxes: (this.state.total + this.state.onlineOrderSavings) * 0.0875 },
          function () {
            this.setState({
              estimatedTotal:
                this.state.total + this.state.onlineOrderSavings + this.state.taxes
            });
          }
        );
      };
    
      giveDiscountHandler = () => {
        if (this.props.promoCode === 'DISCOUNT') {
          this.setState(
            { estimatedTotal: this.state.estimatedTotal * 0.9 },
            function () {
              this.setState({
                disablePromoButton: true
              });
            }
          );
        }
      };
    
      render() {
        console.log("cart props", this.props);
        return (
          <div className="main-cont">
            <Navigation />
            <Container className="purchase-card">
              <SubTotal price={this.state.total.toFixed(2)} />
              <OrderOnlineSaving price={this.state.onlineOrderSavings} />
              <TaxesFees taxes={this.state.taxes.toFixed(2)} />
              <hr />
              <EstimatedTotal price={this.state.estimatedTotal.toFixed(2)} />
            </Container>
          </div>
        );
      }
    }
    
    const mapStateToProps = (state, ownProps) => {
      return {
        stateItem: state
      }
    };
    
    export default connect(mapStateToProps)(Cart);

1 Ответ

1 голос
/ 05 августа 2020

Свойства React не обновляются до тех пор, пока компонент не будет повторно отрисован. Если вы запускаете любое обновление состояния, React или Redux, вы не можете видеть новые значения свойств до тех пор, пока не закончит работу вашего обработчика кликов.

Итак, это никогда не сработает как вы надеетесь: 

const onClick = () => {
  console.log(props.value); // original value
  props.updateSomeValue();
  console.log(props.value); // ERROR: This will _still_ be the original value!
}

Если вы отправляете действие Redux и вам нужно немедленно получить доступ к обновленному состоянию, чтобы запустить больше logi c, вам следует переключить этот код на выполнение в Redux Вместо этого функция "thunk", которая имеет доступ к getState() и может считывать обновленное состояние, как только завершится предыдущая отправка.

...