title: Override the constant file values in React
body: <p>constant file -&gt; constant.js</p>
  <pre><code>export default {
    CITY: 'Banglore',
    STATE: 'Karnataka'
  }
  </code></pre>
  <p>Show Default City Name -&gt; address.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  import CONSTANTS from &quot;./constants&quot;;
  import &quot;./styles.css&quot;;
  
  const Address = () =&gt; {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;p&gt; City : {`${CONSTANTS.CITY}`} &lt;/p&gt;
        &lt;p&gt; State : {`${CONSTANTS.STATE}`} &lt;/p&gt;
      &lt;/div&gt;
    );
  };
  export default Address;
  </code></pre>
  <p>expected output:</p>
  <pre><code>city: banglore
  state: karnataka
  </code></pre>
  <p>we are importing the constant values from constant.js file, now the problem is we have to make one API call which may return overriding values for the constant keys</p>
  <p>example of API response:</p>
  <pre><code>{
    CITY: 'Mysuru'
  }
  </code></pre>
  <p>then CITY is constant file should override with the new value which come after API response and rest other keys should keep their values same.</p>
  <p>expected output:</p>
  <pre><code>city: Mysuru
  state: karnataka
  </code></pre>
  <p>this the basic problem case for me, actually our application already in mid phase of development and more than 500+ constant keys are imported in 100+ components.</p>
  <p><em>1. we are using redux in our application</em></p>
  <p><em>2. we have to call API only once that should effects to all the components</em></p>
  <p>what is the best way to achieve this problem, how can i override my constant files once i make the call to backend, Thank you</p>