Skip to content

How can I dispatch an epic action to a substore? #544

Open
Open
How can I dispatch an epic action to a substore?#544

Description

@rmorrise
rmorrise
opened on Oct 9, 2018

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

Activity

  1. mika1111 commented on Apr 2, 2019

    @mika1111
    mika1111
    on Apr 2, 2019

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

  2. milocosmopolitan commented on Apr 9, 2019

    @milocosmopolitan
    milocosmopolitan
    on Apr 9, 2019

    @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'])
  })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions