angular-redux / example-app Goto Github PK

Getting this error from fresh git clone'd local after yarn and npm start.

ERROR in example-app/src/app/store/store.module.ts (37,9): Supplied parameters do not match any signature of call target.

I am going to open a PR later.

The code is already organized into a lions module and an elephants module. In a larger app, we'd want to code split these such that needed code is only loaded when the relevant app route is activated. Redux introduces some challenges here but they're not insurmountable. How can we:

• only load the elephants components, actions, and epics when the elephants route is accessed?
• same thing for the lions stuff?
• same thing for the feedback stuff?

Ideally we webpack would output code chunks for these routes and load them on the fly.

Thanks for providing such great example. I have come from AngularJS background and I am trying to learn Redux.

I can see that the form data is lost when the route is changed. Can you help me in understanding on how to retain its data like other two routes (elephant and Lion)

Hi,
The example is not working for me. I tried

1. clone the project
2. yarn install
3. ng serve (as doc mention) <- here problem with ng
   had to npm install ng
   then i retried ng serve <- still not working
   error => You have to be inside an angular-cli project in order to use the serve command.
4. i checked the package.json script section
   yarn start (it start but with error)
   ERROR in AppModule is not an NgModule ....
   env: windows 10 / node v6.9.5

TypeError: Cannot read property 'apply' of null
at http://localhost:4200/vendor.bundle.js:69832:12
at NgRedux.configureStore (http://localhost:4200/vendor.bundle.js:26065:131)
at new AppComponent (http://localhost:4200/main.bundle.js:547:17)
at new Wrapper_AppComponent (/AppModule/AppComponent/wrapper.ngfactory.js:7:18)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:28)
at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:4200/vendor.bundle.js:83463:21)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:4200/vendor.bundle.js:83919:52)
at ComponentFactory.create (http://localhost:4200/vendor.bundle.js:44603:25)
at ApplicationRef_.bootstrap (http://localhost:4200/vendor.bundle.js:42537:57)
at http://localhost:4200/vendor.bundle.js:42356:89
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (http://localhost:4200/vendor.bundle.js:42356:42)
at http://localhost:4200/vendor.bundle.js:42308:27
at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:105172:26)
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:31928:37)

I was getting 503 errors with the mock data URLs, so I changed to data urls in service.ts:

const ELEPHANT_URL =
'data:text/plain;charset=utf-8,%5B%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Ellie"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%202%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Edwin"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%201%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Entwhistle"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%203%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Edith"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%202%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Esther"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%203%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Elephant"%2C%0D%0A%20%20%20%20"name"%3A%20"Edward"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%201%0D%0A%20%20%7D%0D%0A%5D';

const LION_URL =
'data:text/plain;charset=utf-8,%5B%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Lion"%2C%0D%0A%20%20%20%20"name"%3A%20"Larry"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%202%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Lion"%2C%0D%0A%20%20%20%20"name"%3A%20"Louise"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%203%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Lion"%2C%0D%0A%20%20%20%20"name"%3A%20"Laura"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%201%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Lion"%2C%0D%0A%20%20%20%20"name"%3A%20"Louis"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%203%0D%0A%20%20%7D%2C%0D%0A%20%20%7B%20%20%20%20%0D%0A%20%20%20%20"type"%3A%20"Lion"%2C%0D%0A%20%20%20%20"name"%3A%20"Lauren"%2C%0D%0A%20%20%20%20"ticketPrice"%3A%202%0D%0A%20%20%7D%0D%0A%5D';

// A fake API on the internets.
const URLS = {
[ANIMAL_TYPES.ELEPHANT]: ELEPHANT_URL,
[ANIMAL_TYPES.LION]: LION_URL,
};

Page.ts

frm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.frm = this.fb.group({
email: ['', Validators.required],
});
}

Page.html

<form [formGroup]="frm" connect="ReactiveForm">
<input class="form-control" formControlName="email" />
</form>

Error

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: No provider for NgForm!
Error: No provider for NgForm!

Hi,

i was looking forward to take a look at your example-app.

Webpack is able to build and "serve" the app on localhost.

But opening http://localhost:4200 results in an empty page.

Steps executed:

1. git clone https://github.com/angular-redux/example-app.git
2. npm install
3. ng serve

Maybe i missed something....

regards,
marcel

I always appreciate when people provide working examples, and I can see you've put significant time into this.

However, I feel compelled to say that if this example application illustrates the correct use of the library, it has convinced me to look elsewhere. I am very new to redux and that's certainly a factor. Yet "beginner's mind" can be valuable. If we bring new engineers onto this project, they will face the same learning curve that I did. Here was my experience.

1. I realize you didn't invent the term, but I found "epic" to be confusing and non-descriptive. From what I can tell, it's a method to observe redux actions and act on them without modifying them. This seems a lot like an observable, except with a LOT more overhead.

2. The code structure is really hard for me to follow. In particular, many files called "epic.ts", etc, in which their purpose is only made "clear" by seeing the path the file is in. After many hours of working with this structure I still found myself very confused trying to navigate it.

3. The code inside epic.ts feels extremely over-engineered to me, overly clever, and it's not obvious to me how it will scale. For example:

  private createLoadAnimalEpic(animalType): Epic<AnimalAPIAction, IAppState> {
    return (action$, store) => action$
      .ofType(AnimalAPIActions.LOAD_ANIMALS)
      .filter(action => actionIsForCorrectAnimalType(animalType)(action))
      .filter(() => animalsNotAlreadyFetched(animalType, store.getState()))
      .switchMap(a => this.service.getAll(animalType)
        .map(data => this.actions.loadSucceeded(animalType, data))
        .catch(response => of(this.actions.loadFailed(animalType, {
          status: '' + response.status,
        })))
        .startWith(this.actions.loadStarted(animalType)));

Now, I understand that boilerplate is necessary here, and that in a trivial example like this the boilerplate may seem especially silly. However, this boilerplate seems to me like it will need to be repeated endlessly throughout the application with every new API. I also am not sure about performance. Does every action pass through these filters?

I am reminded a bit of this spoof, in which a trivial problem is solved using industry standard design patterns and libraries and made exponentially more complicated.
https://github.com/EnterpriseQualityCoding/FizzBuzzEnterpriseEdition

This is just my opinion, and as I've said, I'm new to redux. However, I still maintain there's something wrong with the implementation of this library if this is the "correct" way to use it.

Thanks for listening.

P.S. I have switched over to investigating the architecture used in ngrx, namely: https://github.com/ngrx/example-app.

To me, this is just vastly easier to follow. Just the naming of the file "book.ts" in the models folder makes a huge difference to me. Can you make a case for the advantages of angular-redux library over ngrx?

I know this issue is upstream, but it impacts starting your demo app on windows.

npm ERR! @angular-redux/[email protected] postinstall: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular-redux/[email protected] postinstall script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular-redux/form package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular-redux/form
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular-redux/form
npm ERR! There is likely additional logging output above.

Probably just forgot to declare a service somewhere.

Hey @SethDavenport! I've used your example app to work on an integration of ng2-redux with the Apollo client (repo).

The major goal was to get the Apollo client to use an existing Redux store in an angular app. This is currently not possible with ngrx/store which I've used before (see issue). Since ng2-redux is wrapping itself around Redux rather than re-implementing it, the integration just works out of the box, which is kind of awesome!

One small issue though: I couldn't get the example app to run with the current HEAD, which could be related to the angular-redux renaming. So I based my example app off of a previous version that still uses ng2-redux.

In any case, big thanks to you for all your work on angular-redux!

I changed two lines in your example and run it. After about 30,000 actions app accumulates up to 300MB memory and crashes.

These are steps to reproduce this issue:

1. Update addTicket in animal component to, this code simulates dispatching many actions to observe the issue easier:

  addTicket = () => {
    for (let i = 0; i < 10000; i++) {
      setTimeout(() => this.subStore.dispatch({ type: 'ADD_TICKET' }), 1);
    }
  }

2. Remove the createLogger and devTools enhancer from store/module:

    // Tell Redux about our reducers and epics. If the Redux DevTools
    // chrome extension is available in the browser, tell Redux about
    // it too.
    store.configureStore(
      rootReducer,
      {},
      [ ...rootEpics.createEpics() ]);

3. Run the app yarn start
4. Click on + to start the process: this will dispatch 10000 actions and update the UI.
5. Observe how app crashes after a few times clicking on the plus

You may check the memory in Chrome devTools too.

Put it into core module as an "animal-list.component"

hi
i get this error: ERROR in NgReduxFormModule is not an NgModule

Your global Angular CLI version (1.2.3) is greater than your local
version (1.0.1). The local Angular CLI version is used.

Error in combinereducers .
Argument of t
type '{}' is not assignable to parameter of type 'IAppState'.

Hi,

Thank you for a great example app!
I am having trouble getting Epics to work with the actions dispatched from the DevToolsExtension.
I cant get it to work either in my own app nor with this example app.

Reducers picks up the actions just fine.

At first i thought it was related too redux-observable/redux-observable#81
but that does not appear to be the case.

First off, thanks to the maintainers of this example for everything you've done. You've saved me a lot of time in my AngularJS+ng-redux to Angular+angular-redux/store+TypeScript upgrade!

I'm curious as to the reasoning behind the choice to have the example use this pattern of having Elephant and Lion sort of "inherit" from Animal. It's been my experience that whenever I've tried, in actual client work, to apply inheritance somewhere, the children end up diverging, and I end up regretting it.

So I think the pattern is not a common use case, and more importantly, it creates an obstacle toward the goal of this codebase, that is, to understand how to use angular-redux.

While this abstraction is fascinating, I would really prefer to lose one of the animals and just see an implementation where one of the two has its own components, actions, epics, reducer, service, etc.

If you're open to this, I would absolutely be willing to do the work myself and submit a PR.

Show an example using Angular's Testbed to test a component making selections from the redux store.

• Mock out redux in such a way that selections come from the mock store
• Push something onto the observable
• Ensure that the component renders correctly.

Great example app!

Would be interested to see the example include of how angular redux forms would work when adding or editing an elephant or lion with a form to the existing state array.

I am trying to understand the benefits using redux for forms (in a project that already uses redux for state management). The feedback form example with a default reducer is quite basic and maybe most would just still use a generic angular form and access the .valueChanges observable of a particular form control to compute the characters remaining.