Есть компонент App
, который пробрасывает массив с адресами (locations) в компонент Map
, представляющий карту с метками по указанным адресам, в компонент List
, представляющий список адресов, и в Input
, позволяющий добавлять новые адреса (в моей терминологии это location point).
Я вынес логику CRUD операций с адресами в отдельные функции - чтобы немного упросить задачу написания unit-тестов для этих функций и убрать нагромождение логики, которая по существу является достаточно универсальной и может быть позднее повторно использована.
В приложение на текущий момент не используется никакой state management (ни Redux, ни MobX).
Вопрос исходит из этого: В классе приходится создавать функции "провайдеры", которые обеспечивают обновление state.locations
за счет вызова функций с реальной логикой (в примере это App.addLocPoint
, вызывающий addLocationPoint
для получения обновленного массива locations) и передавать эти провайдеры дочерним компонентам, чтобы они их вызывали при соответствующем действии пользователя (например, добавление адреса через Input.onSubmit
).
Код, обсуждаемого примера (приведен для пояснения, не запустится так как нет импортов):
// Adds a new location point
const addLocactionPoint = (locations: array, address: string) => {
// ...
return updatedLocations;
}
class App extends React.Component {
constructor() {
this.state = {
locations: [],
}
// bind addLocPoint, etc.
}
addLocPoint(address) {
this.setState(state => {
addLocactionPoint(state.locations, address);
});
}
// ...
render() {
return (
<Input onSubmit={ this.addLocPoint } />
<List
onDrag={ this.moveLocPoint }
onDelete={ this.deleteLocPoint }
/>
<Map data={ this.state.locations } />
);
}
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
Является ли такое решение приемлемой практикой? Возможно, есть способ обойтись без этих "провайдеров" и как-то иначе обновлять state, не нагружая App огромным количество логики и не прибегая к Redux (или MobX)? Или, возможно, для таких кейсов хорошим решением все же будет использовать стороннюю библиотеку для управления state?
Буду признателен за рекомендации по вопросу (благодарен даже за ссылку на материал для изучения по данной теме).