Aurelia with higher order components and a single state store
This project shows an example of how you can structure your application to use an React/Redux architecture, yet not having to sacrifice flexiblity and power of Aurelia's two-way binding. Besides that the store implementation is based on RxJS instead of Redux. It uses a classic service class as backbone. The reason for this is to allow a smoother introduction of new concepts in an existing app.
- Checkout the repository
npm install -g aurelia-clito install the Aurelia CLI globally
- install the examples dependencies inside the projects root with
- Make sure to install the Redux DevTools Browser extension (e.g for Chrome here)
au run --watchto get started
- open your browser with the address
- you should notice the active Redux DevTools extension in your browser
Recommended way to review the example
The sources, both code and templates, are fully documented to provide a good understanding how one feature and concepts builds upon the other. In order to get the most out of your first contact I'd recommend the following process:
- Start with the
main.ts, Aurelia's main entry point.
- Go on with
- After that start with the higher order components ViewModel
Do not get distracted by any references from the store, models or service classes yet
- Switch to the smart component
- Continue with the dumb component
- Now its time to switch to the service and store implementation. Start with the
- Continue to the classic service
Note that this service could be used as it is in a classic MVVM / Two-Way-Binding approach.
- Finish your journey with the
- How do we enable support for middlewares, like Redux does?
A middleware is comparable to Express.js like middlewares, as such that it adds different functionallity before the actual request response cycle is complete. In Redux this means we're adding features which overload the action dispatcher. In combination with RxJS BehaviorSubjects, that means we'd need to override the
next method to apply additional middlewares before processing our own function.
This is best done by subclassing the original BehaviorSubject and creating our own
MiddlewareBehaviorSubject as depicted in the branch middleware-behavior-subject. You can find the extended Subject over here
- How to unit test the store and state depending components?
Testing is always an important question when evaluating a new approach. By using RxJS as the base for this example, coupled with Aurelia's Component Tester, we're having a fully versatile solution to cover each test scenario.
Inside the folder
test/unit you can find the files developer-store.spec.ts - for the store based unit tests - and list-developer.spec.ts depicting how to test a dumb component, which accepts data via attribute inputs. The later is a TestBed approach, showing a integration test, covering the DOM.
The unit tests contain inline comments for all interesting details