title: When should I use curly braces for ES6 import?
body: <p>It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am working on, I have the following file and its content:</p>
  <h3>File <em>initialState.js</em></h3>
  <pre><code>var initialState = {
      todo: {
          todos: [
              {id: 1, task: 'Finish Coding', completed: false},
              {id: 2, task: 'Do Laundry', completed: false},
              {id: 2, task: 'Shopping Groceries', completed: false},
          ]
      }
  };
  
  export default initialState;
  </code></pre>
  <p>In the TodoReducer.js, I have to import it without curly braces:</p>
  <pre><code>import initialState from './todoInitialState';
  </code></pre>
  <p>If I enclose the <code>initialState</code> in curly braces, I get the following error for the following line of code:</p>
  <blockquote>
  <p>Cannot read property todo of undefined</p>
  </blockquote>
  <h3>File <em>TodoReducer.js</em>:</h3>
  <pre><code>export default function todos(state = initialState.todo, action) {
      // ...
  }
  </code></pre>
  <p>Similar errors also happen to my components with the curly braces. I was wondering when I should use curly braces for a single import, because obviously, when importing multiple component/modules, you have to enclose them in curly braces, which I know.</p>
  <p>The Stack Overflow post at <a href="https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax">here</a> does not answer my question, instead I am asking <em>when</em> I should or should not use curly braces for importing a <strong>single</strong> module, or I should never use curly braces for importing a single module in ES6 (this is apparently not the case, as I have seen single import with curly braces required).</p>