title: @ngrx/store: dispatch from an action. Is it good & how to?
body: <p>I'm working on a project using Angular 2 and @ngrx/store.question about a good practice and how to do this.</p>
  
  <p>I've developed a "web finder" to manage files. So I can do some basic actions like copy, move etc.</p>
  
  <p>I'll don't explain why because it's just an <strong>example</strong> but moving a file consists in 3 steps :</p>
  
  <ul>
  <li>Logic: do some verifications.</li>
  <li>dispatch an action A</li>
  <li>dispatch an action B</li>
  </ul>
  
  <p>Those 3 steps are done inside my angular component. I've thought about it and I think it's a better idea to simply dispatch one action whichdo some verifications and dispatches 2 other actions.</p>
  
  <p>Why would I do this ? Firstly, it's easier to read</p>
  
  <pre><code>this._store.dispatch(copy(myFile));
  </code></pre>
  
  <p>rather than</p>
  
  <pre><code>// ...
  // verifications
  // ...
  
  this._store.dispatch(action1(myFile, foo, bar));
  this._store.dispatch(action2(myFile));
  </code></pre>
  
  <p>Secondly, I can dispatch my <code>copy</code> action creator on the fly without experiencing any side-effects because the verification will be executed inside the action.</p>
  
  <p>Actually, I can dispatch my <code>action1</code> et <code>action2</code> without doing my verifications.</p>
  
  <p>Finally, all my logic is inside my actions. I can keep my component simple and focus on their job (manage the UI etc). Which is great.</p>
  
  <h2>Question 1: Good practice ?</h2>
  
  <p>IIs it a good idea to do that ? I think so, but your experience interests me.</p>
  
  <h2>Question 2: How to ?</h2>
  
  <p>How to do that ? My actions creators are just functions. I can't decorate them with <code>Injectable</code> and use the <code>constructor</code> to inject instances.</p>
  
  <p>Here is an example of action creators:</p>
  
  <pre><code>import { Action } from '@ngrx/store'
  
  export const NAVIGATE_TO_NODE:string = '[Browser] Navigate to node';
  export const ADD_TO_SELECTION:string = '[Browser] Add to browser selection';
  export const REMOVE_FROM_SELECTION:string = '[Browser] Remove from browser selection';
  export const REMOVE_ALL_FROM_SELECTION:string = '[Browser] Remove all from browser selection';
  
  export const navigateToNode:(nodeId: number, paneId?: number)=&gt;Action = (nodeId: number, paneId?: number) =&gt; {
    return {
      payload: { nodeId, paneId },
      type: NAVIGATE_TO_NODE
    };
  };
  export const addToSelection: (addInfo: any)=&gt;Action = (addInfo: any) =&gt; {
    return {
      payload: addInfo,
      type: ADD_TO_SELECTION
    };
  };
  export const removeFromSelection: (removeInfo: any[])=&gt;Action = (removeInfo: any[]) =&gt; {
    return {
      payload: removeInfo,
      type: REMOVE_FROM_SELECTION
    }
  };
  export const removeAllFromSelection: ()=&gt;Action = () =&gt; {
    return {
      payload: null,
      type: REMOVE_ALL_FROM_SELECTION
    }
  };
  </code></pre>
  
  <p>How can I dispatch from those action creators ?</p>
  
  <p>I've already used redux as an implementation of Redux with React and I've founde a little package that allows me to dispatch from an action creator: <a href="https://github.com/gaearon/redux-thunk" rel="nofollow">redux-thunk</a></p>