React. Как сделать «индивидуальный» inject для компонента в компоненте, выводимом через map?

Question

[Destell]

Есть набор карточек с данными, выводятся через map. К карточке подключен mobx store, с помощью которого карточки редактируются и т.д.
У каждой карточки получается "свой" стор, который так же подключается в провайдер.

Далее возникла проблема - карточка разбита на три компонента: тело, инпат и панель с кнопками, которые переключают редактирование, сохраняют изменения и т.д. Как раз кнопки должны получать функцию переключения редактирования из card store.
Однако, если сделать inject в кнопки, то store срабатывает для них глобально (что логично).

Получается, есть только два выхода - использовать props или перенести кнопки напрямую в карточку? Возможно ли это переложить полностью на плечи store, оставив структуру в ее текущем виде?

Git

Answer 1

[Алексей Лауд]

А в чем проблема? Кнопки меняют в сторе значения для своей карточки (по id или как-то еще), до карточки доходит обновленный стор, карточка обновляется.

Comments

[Destell]

В сторе код переключения

class CardStore {
    @observable editable = false;

    @action("toggle editable")
    toggleEditable = () => {
        this.editable = !this.editable     
    };
}

Подключается в компоненте карточки (уже после map из фетч)

return (
            <Provider {...stores}>
                <React.Fragment>
                    {this.editable ? <Form /> : <Div />}
                </React.Fragment>
            </Provider>
        );

Т.е. для каждой карточки получается свой toggleEditable.

Там же в карточке подключается панель кнопок , через переменную editable в ней переключаются кнопки "edit / save", через props она задействует toggleEditable "своей" карточки и переключает себя. Через инжект же переключение идет разом на все панели.

[Robur]

Стор у вас там в карточках вообще не используется - вы локальные свойства в каждой карточке создаете. Если хотите их использовать в дочерних компонентах - передавайте через props, как еще они могут к этим свойствам обратиться. Если хотите положить в стор - то или создайте свой стор для каждой карточки либо в общем сторе создайте массив editable - по одному на каждую карточку. А так у вас каша какая-то.

[Destell]

Robur, так в проекте на данный момент, я пытаюсь их все убрать в стор.
Т.е. весь этот блок

spoiler

@observable editable = false;
    @observable template = {};

    @action("toggle editable")
    toggleEditable = () => {
        this.editable = !this.editable
    };

    @action("fill template")
    fillTemplate = () => {
        const fillTemplate = {};
        for (let key in this.props.item) {
            fillTemplate[key] = this.props.item[key];
        }
        this.template = fillTemplate;
    };

    @action("template edit")
    templateEdit = (e, type) => {
        this.template[type] = e.target.value
    };

Стор для каждой карточки работает, он не работает для options, подключаемых в карточку.
Залил на гит обновление с примером попытки переноса editable в стор.

[Robur]

стор я вижу там все равно один и в нем только одно поле editable.
Вам надо или много сторов сделать - или много editable.
Где вы каждое состояние для каждой отдельной карточки хранить собираетесь?

[Destell]

Robur, все, перепроверил, мой фейл. Извиняюсь.