无法从商店获取更新的 state

Question

#this is where I wanna do the Dispacth() action to props I believe I connected the component correctly. the first argument maps state to props, the second maps to the dispatch. So that when I dispatch the action then I log getState, I can see that the store is updated.

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);

#my reducer is below

 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;

#and this is where I wanna get the updated state to the props I believe I connected the component correctly. the first argument maps state to props, the second maps to the dispatch. So that when I dispatch the action then I log getState, I can see that the store is updated.

 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);

Answer 1

React props do not update until after a component has re-rendered. If you trigger any state update, React or Redux, you cannot see new props values until sometime after your click handler has finished.

So, this will never work as you're hoping for:

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

If you're dispatching a Redux action and need to immediately access the updated state to run more logic, you should switch that code to execute in a Redux "thunk" function instead, which has access to getState() and can read the updated state as soon as the previous dispatch completes.