Render a component when the store changes in React

1

I am using Redux with React to implement a platform that processes sales invoices. The parent component imports several components in turn, one of them is the component with customer information, "SalesInfo" as indicated below:

render() {
const currentNumber = 'FV-${this.props.sales.invoice.consecutive}';
return (
  <div className="sales-container">
    <ModuleTitle title={this.state.title} 
      charge={true} 
      numberLabel={true} 
      number={currentNumber} 
      type={this.state.titleType} 
    />
    <SalesInfo />
    <AddProduct withoutCategory={true} />
    <div className="sales-center-container">
      <SalesTable />
      <SalesSubTotal />
    </div>
    <SalesTotal type={this.state.type} />
  </div>
);

This "SalesInfo" component has a status that reads the store's current information through props using connect.

componentWillMount() {
this.setState({
  name: this.props.auth.client.data.name,
  address: this.props.auth.client.data.address,
  cellphone: this.props.auth.client.data.cellphone,
  nit: this.props.auth.client.data.nit,
});
}

When the sale in the "SalesTotal" component is finished, there is a button to restart the fields in the store to place the initial conditions to generate another order.

Problem The problem I have is that the action to clean the fields runs correctly, the store is updated, but the child component "SalesInfo" is not rendered again and I have to change the path so that take the changes of the store. What can I implement to read the store changes or render again?

Update It must be borne in mind that the fields are of type input, therefore the following form is used to render it:

<input type="text"
      className="input-text" 
      name="name" 
      onChange={this.handleChange}
      onKeyPress={this.handleKeyPress}
      value={this.state.name}
      placeholder="Cliente Particular"
/>

When it is of type "label" with only assigning the value of the store it is enough to update the component without rendering it again. Therefore the question is focused on input type fields. I have tried to apply what the documentation says about it without success. Documentation

Thanks for your response.

    
asked by Julian Salamanca 23.02.2018 в 16:59
source

1 answer

0

But I am wrong, this happens to you because you are setting the props in the state in CWM, this function is called only in the load once. I imagine, since you have not put the code of the dispatch that you are updating the store with the fields of the inputs and not directly the state. It could be as follows:

Do not use the state of the component but directly the props of the store.

  value={this.props.auth.client.data.name,}
    
answered by 05.03.2018 в 10:52