title: Using Globalized Redux Selector In Side Effect Creates Circular Dependency
body: <p>I'm storing form data in redux store after normalizing it using <code>normalizr</code>. When I submit the form, I get the denormalized data using selectors inside my thunk and then send it to the server. The flow goes the following way:</p>
  
  <p><code>rootReducer -&gt; localReducer -&gt; action/actionCreator -&gt; rootReducer</code></p>
  
  <p>In <code>rootReducer</code> file, the root reducer composes <code>localReducer</code> and contains the globalized selector to be used later in the thunk. The <code>localReducer</code> file imports actions from the actions file which contains the action creators too. The thunk action creator returns a thunk which does the api call using data retrieved by the selector in <code>rootReducer</code> file, hence the circular dependency.</p>
  
  <p>Webpack is not handling well this circular dependency. I got a runtime <code>Uncaught TypeError: Cannot read property 'JOB_FORM_RESET' of undefined</code> error at the <code>localReducer -&gt; action/actionCreator</code> level:  </p>
  
  <pre><code>const jobsForm = (state = initialState, action) =&gt; {
    switch (action.type) {
      case ActionTypes.JOB_FORM_RESET:
  </code></pre>
  
  <p>Any thoughts on how to solve this?</p>
  
  <h2>Edit</h2>
  
  <p><code>ActionTypes</code> being evaluated to <code>undefined</code> works as specced. <code>ActionTypes</code> is located in the <code>action/actionCreator</code> file whose execution didn't finish when it was first imported by <code>localReducer</code> because it started immediately importing the <code>rootReducer</code>. In order to avoid the infinite loop, an unfinished copy of <code>action/actionCreator</code> (where <code>ActionTypes</code> is evaluated to <code>undefined</code>) is given to <code>localReducer</code>.</p>
  
  <p>The solution is to separate the actions and action creators by putting them in two different files. This will remove the cyclic dependency as shown in the following flow:</p>
  
  <pre><code>rootReducer -&gt; localReducer -&gt; action
  actionCreator -&gt; rootReducer
  </code></pre>
  
  <p>The weird thing for me is that grouping action and action creators has been advocated in redux guidelines since too long and separating them in two files feels less natural.</p>
  
  <p>In addition, this cyclic issue doesn't appear in <code>redux-saga</code> model:</p>
  
  <pre><code>rootReducer -&gt; localReducer -&gt; action/actionCreator
  saga -&gt; api -&gt; rootReducer
  </code></pre>
  
  <p>I'm used to this model but can't believe that <code>redux-thunk</code> model doesn't solve this issue. In other words, it doesn't seem fair to say that the cyclic issue is an inherent side effect of the <code>redux-thunk</code> model. Am I missing something here?</p>
  
  <p>You can find an MCVE in this <a href="https://github.com/ahmehri/redux-thunk-globalized-selectors-cyclic-dependencies" rel="nofollow noreferrer">repo</a>. The error is different but it's the same principle, it was caused by a cyclic dependencies caused by the following import in <code>src/Users/actions.js</code> file:<br>
  <code>import { getSelectedUsers } from '../reducer';</code></p>
  
  <p>The occurred error is <code>No reducer provided for key "users"</code>. Just comment the above import and the error will disappear.</p>
  
  <p>As I describe above, this works as specced, my concern is that the <code>redux-thunk</code> model doesn't handle this use case. In addition, putting actions and action creators both in the same file and then wait for a cyclic dependencies issue to occur to separate them doesn't seem a scalable solution.</p>