title: A strategy to alter redux state with action in useEffect()?
body: <p>I'm trying to implement a component that takes a phone number from the redux store, parses the number up on component load with <code>useEffect()</code>, puts the parsed elements (country code and ten digit number) into their own state with <code>useState()</code> and then on <code>onChange</code> of the phone form, update both sections of the number AND update the full phone prop coming from the redux store. I'm obviously not doing something right here:</p>
  <pre><code>
  import React, { useState, useEffect } from 'react';
  import { object, func, bool } from 'prop-types';
  import { Row, Col } from 'styled-bootstrap-grid';
  import { connect } from 'react-redux';
  import './BillingDetails.css';
  import Button from 'components/Button';
  import {
    setFirstName,
    setLastName,
    setPhone,
    setEmail,
  } from '../../../store/signup/actions';
  
  import {
    billingDetailsError,
    isValidInput,
    regExpValidations,
  } from '../validateInput';
  
  import InnerTitle from './InnerTitle';
  import Input from './Input';
  import PhoneInput from './PhoneInput';
  import CountryCodeInput from './CountryCodeInput';
  import Dropdown from './Dropdown';
  
  const BillingDetails = ({ signup, onChange, onBlur, onNext, inputError }) =&gt; {
    const { first_name: firstName, last_name: lastName, email, phone } = signup;
  
  
    const [countryCode, setCountryCode] = useState('');
    const [mobileNumber, setMobileNumber] = useState('');
  
    // Parse the incoming phone prop into country code and the ten digit mobile phone. Sets separate state for both.
    useEffect(() =&gt; {
      const phoneArray = phone.split('');
      const cc = phoneArray.splice(0, phoneArray.length - 10).join('');
      setCountryCode(cc);
    }, '');
  
    useEffect(() =&gt; {
      const phoneArray = phone.split('');
      const tenDigitNumber = phoneArray.join('');
      setMobileNumber(tenDigitNumber);
    }, '');
  
    useEffect(() =&gt; {
      interpolatePhone();
    }, [countryCode, mobileNumber]);
  
  
    const interpolatePhone = () =&gt; {
      const fixedMobile = mobileNumber.replace(/[- )(]/g, '');
      const interpolatedPhone = `${countryCode}${fixedMobile}`;
      setPhone(interpolatedPhone);
    };
  
    // Onsubmit concatenates country code and mobile number, calls setPhone action with concat number and onNext().
    const onSubmit = e =&gt; {
      e.preventDefault();
      setPhone(interpolatePhone());
      onNext();
    };
  
  </code></pre>
  <p>skipping to relevant JSX:</p>
  <pre><code> &lt;Col sm=&quot;12&quot; md=&quot;12&quot;&gt;
            &lt;&gt;
              &lt;div className=&quot;phone-input&quot;&gt;
                &lt;Col sm=&quot;3&quot; md=&quot;4&quot;&gt;
                  &lt;CountryCodeInput
                    label=&quot;mobile number&quot;
                    name=&quot;country_code&quot;
                    onChange={e =&gt; setCountryCode(e.target.value)}
                    onBlur={onBlur}
                    type=&quot;country_code&quot;
                    value={countryCode}
                    inputValue={!countryCode ? '+1' : countryCode}
                    masked
                    error={
                      inputError &amp;&amp; !isValidInput(phone, regExpValidations.phone)
                    }
                  /&gt;
                &lt;/Col&gt;
                &lt;Col sm=&quot;1&quot; md=&quot;1&quot;&gt;
                  |
                &lt;/Col&gt;
                &lt;Col sm=&quot;3&quot; md=&quot;4&quot;&gt;
                  &lt;PhoneInput
                    autoFocus
                    name=&quot;mobile_phone&quot;
                    onChange={e =&gt; setMobileNumber(e.target.value)}
                    onBlur={onBlur}
                    type=&quot;phone&quot;
                    value={mobileNumber}
                    inputValue={mobileNumber}
                    masked
                    error={
                      inputError &amp;&amp; !isValidInput(phone, regExpValidations.phone)
                    }
                  /&gt;
                &lt;/Col&gt;
              &lt;/div&gt;
            &lt;/&gt;
          &lt;/Col&gt;
          &lt;Button
            className=&quot;full-width&quot;
            onClick={onSubmit}
            disabled={billingDetailsError(signup)}
          &gt;
            Continue
          &lt;/Button&gt;
     &lt;/Button&gt;
        &lt;/Row&gt;
      &lt;/Col&gt;
    );
  };
  
  const mapStateToProps = state =&gt; ({
    signup: state.signup,
  });
  
  export default connect(mapStateToProps)(BillingDetails);
  </code></pre>