Хороший? Плохой? Злой?
FLUX (Reflux, Redux, etc.)
const user = {
firstName: '',
lastName: ''
};
function render() {
document.getElementById('app').innerHTML = user.firstName + user.lastName;
}
// 1 вариант
user.firstName = 'Вася';
render();
user.firstName = 'Петя';
render();
// 2 вариант
user.setFirstName = function(newFirstName) {
this.firstName = newFirstName;
render();
};
// 3 вариант
const user = {
firstName: '',
lastName: '',
set firstName(newFirstName) {
this.firstName = newFirstName;
render();
}
};
// 4 вариант - реактивный
Увидим дальше
import {observable} from "mobx";
class OrderLine {
@observable price = 0;
@observable amount = 1;
}
const observableUser = mobx.observable({
firstName: '',
lastName: ''
});
Через декораторы
import {observable, computed} from "mobx";
class OrderLine {
@observable price = 0;
@observable amount = 1;
@computed get total() {
return this.price * this.amount;
}
}
var upperCaseName = computed(() =>
return user.firstName + user.lastName;
);
Через декораторы
const user = {
firstName: '',
lastName: ''
};
autorun(() => {
document.getElementById('app').innerHTML =
user.firstName + user.lastName;
});
user.firstName = 'Света';
user.lastName = 'Светина';
const user = {
firstName: '',
lastName: ''
};
autorun(() => {
document.getElementById('app').innerHTML =
user.firstName + user.lastName;
});
mobx.transaction(() => {
user.firstName = 'Света';
user.lastName = 'Светина';
});
Менять хранилище отовсюду - плохая практика
// Путь нехорошего программиста
$('.element').on('click', () => {
store.user.firstName = 'Катя-Катерина';
});
// Путь хорошего программиста
$('.element').on('click', () => {
modifyUserFirstName('Катя-Катерина');
});
@action function modifyUserFirstName(newFirstName) {
store.user.firstName = newFirstName;
}
// Еще лучше
const Store = {
user: {
firstName: '',
@action modifyFirstName(newFirstName) {
this.firstName = newFirstName;
}
}
}
$('.element').on('click', () => {
Store.user.modifyFirstName('Катя-Катерина');
});
npm install mobx-react-devtools