title: "Property 'action' does not exist on type..." error in createReducer() NgRx function
body: <p>I'm refactoring my NgRx reducer to use the <code>createReducer()</code> function instead of the traditional switch statement, but I'm getting the following errors:</p>
  
  <pre><code>ERROR in src/app/store/price.reducer.ts(17,32): error TS2339: Property 'action' does not exist on type 'IUser &amp; TypedAction&lt;"[Websocket Service] Get User"&gt; &amp; { type: "[Websocket Service] Get User"; }'.
      src/app/store/price.reducer.ts(18,34): error TS2339: Property 'action' does not exist on type 'IPrice &amp; TypedAction&lt;"[Websocket Service] New Prices"&gt; &amp; { type: "[Websocket Service] New Prices"; }'.
  </code></pre>
  
  <p>This is my <code>createReducer()</code> function and the exported reducer itself:</p>
  
  <pre><code>const userPriceReducer = createReducer(
    defaultState,
    on(actions.getUser, (state, {action}) =&gt; ({ ...state, user: { firstName: &lt;string&gt;action.firstName, lastName: &lt;string&gt;action.lastName, age: &lt;number&gt;action.age } })),
    on(actions.newPrices, (state, {action}) =&gt; ({ ...state, prices: { ...state.prices, ...{[action.product_id]: &lt;number&gt;action.price } } }))
  )
  
  export function reducer(state: State | undefined, action: Action) {
    return userPriceReducer(state, action);
  }
  </code></pre>
  
  <p>And here are my actions:</p>
  
  <pre><code>export const NEW_PRICES = '[Websocket Service] New Prices';
  export const GET_USER = '[Websocket Service] Get User';
  
  export const newPrices = createAction(
    NEW_PRICES,
    props&lt;IPrice&gt;()
  );
  
  export const getUser = createAction(
    GET_USER,
    props&lt;IUser&gt;()
  );
  </code></pre>
  
  <p><code>IPrice</code> and <code>IUser</code> are interfaces that describe the shape of the action data.</p>
  
  <p>The documentation that I've read about this says that the second argument inside the curly braces after <code>state</code> in the <code>createReducer()</code> function (where I've put <code>{action}</code>) is supposed to be the payload of the action, however since I'm using <code>createAction()</code> for my actions, there is no actual <code>payload</code> property in the action as there used to be and the action itself carries the data. I have no problem accessing and saving this data when using the switch statement approach. What am I doing wrong here?</p>