How can I dispatch an epic action to a substore?

[rmorrise]

This is a...

• feature request
• bug report
• usage question

What toolchain are you using for transpilation/bundling?

• @angular/cli
• Custom @ngTools/webpack
• Raw ngc
• SystemJS
• Rollup
• Other

Environment

NodeJS Version: 8.11.2
Typescript Version: 2.7.2
Angular Version: 6.0.3
@angular-redux/store version: 9.0.0
@angular/cli version: (if applicable) 6.0.7
OS: win32 x64

Steps to reproduce:

1. Set up a child component using @WithSubStore
2. Set up an epic using createEpicMiddleware
3. Dispatch an action from the child component that triggers the epic.

Expected Behaviour:

The epic triggers and creates a new action. Both the root reducer and the substore reducer should receive the new action.

Actual Behaviour:

The root reducer receives the new action, but the substore reducer does not!

Additional Notes:

What is the correct way to use epics and fractal stores together?

I noticed that the action, when dispatched to the substore, has a property like this:
action['@angular-redux::fractalkey']
I found that I could set this property explicitly when creating the action to fix the issue.

This seems like it relies on some unpublished implementation detail of angular-redux, and I somehow feel like it defeats the purpose of epic/substore usage.

Any help would be appreciated!

Thanks

[mika1111]

+1 I am also wondering how to add epic to fractal store

[milocosmopolitan]

@rmorrise @mika1111 Since actions that are dispatched from component using WithSubStore decorator will append sub store path with '@angular-redux::fractalkey'. You can have other action to take the value of sub store path and epic could simply pass it along.

const ping = (...yourArgs, fractalKey?: string) => ({
  type: PING,
  ...yourArgs,
  '@angular-redux::fractalkey': fractalKey
})

const pong = (...yourArgs, fractalKey?: string) => ({
  type: PONG,
  ...yourArgs,
  '@angular-redux::fractalkey': fractalKey
})

const pingToDaPong = action$ => action$
  .ofType(PING)
  .map(action => {
    return pong(action.arg1, action.arg2, action['@angular-redux::fractalkey'])
  })