Reputation: 68
I have an already existing AngularJS (1.6) application built with some components. The app itself is just a showcase of some old and already existing AngularJS directives. I've implemented them inside some components to just print them on the UI.
I have been learning Redux lately (I'm still new to this) and want to implement the correct redux behaviour in the whole project. As far as I understood, there's a single app state, where all the data is immutable and one-way binded down to its components, which use events created by its parents, that end up using the reducers, to re-create the application state and change the data accordingly.
My problem now is, that this already existing directives, are built to modify the data themselves, they do not trigger events.
For example this datepicker:
Container component has this code
<example-datepicker date="model.date"></example-datepicker>
Datepicker component uses this controller bindings
bindings: {
date: '='
}
And this template, which literally uses the old directive I mentioned
<date-picker date-model="model.date" name="dateForm"></date-picker>
Well now, the datepicker directive is only responsible for showing the datepicker, and changing the model whenever the uses selects a date. Now imagine that my application state has this "date" string. It is supposed to be immutable, then, the directive shouldn't be changing it, right?
Am I supposed to change the directive accordingly to this behaviour, if not, how do I trigger this into an event? I've thought about using the component's $onChanges function, but that requires the two-way binding, which literally changes the model, and that is changing the state, which is supposed to be immutable.
Did I understand redux wrongly, or this State>Component>Directive behaviour I'm trying to use is simply not possible with Redux?
Thanks in advance
Upvotes: 0
Views: 97
Reputation: 96
First of all you can try ng-redux with its connector, think that it could simplify some stuff. Apart from that the idea is that you should dispatch actions from the directives/components to update the store, and the store notifies all listeners about changes (you can use the subscribe method that redux provides).
One thing that is also important is that you don't need to store all the data inside your redux store, sometimes having directives/components with own data (it could be two-way bound data) is more flexible for forms. In that case you just need to dispatch an action at certain place.
And if you need to trigger $onChanges hook, you should just update the reference to the object that's passed to the component
Upvotes: 1