Как правильно спроектировать компонент поиска данных, через store?

Question

[Сергей Сунцев]

Сделал компонент поиска, который принимает данные таблицы и выводит соответствующие поля.
В компоненте есть ducks модель, в которой действия проходят через экшн криейтеры в саги и от туда обновляют стор.

Вроде компонент получился хорошим и универсальным, но пришли правки и потребовалось через поиск реализовывать изменение других таблиц+ ещё несколько сайд эффектов.

Т.к. ранее с сагами не работал сделал всё по простому. В компонент отправлял пропсы из родителя и уже в componentDidUpdate после изменения соответствующего состояния вызывал определенные экшены из родителя, при условии, что они приходят.

Но вот проблема на странице может быть несколько таких компонентов и они при изменении состояния одного компонента в componentDidUpdate думает, что изменилось состояние обоих компонентов, что собственно так и есть store же один на всех и собственно обновление срабатывает на обоих компонентов.
Что в корне ломает функционал.

Может есть какие советы?
Моё заднее чутьё подсказывает, что вместо componentDidUpdate можно просто в сагах отслеживать выполнение экшна из модели SEARCH в модели родителя, но просто импорт экшена из SEARCH и вызов его, через yeld take(...) не даёт результатов.

Т.к. Кода много выложил его в отдельный Gist

Answer 1

[Dmitry Alekseev]

Я подозреваю, что у вас store создаётся вне конструктора компонента, поэтому он общий на библиотеку, но не на экземпляр компонента, ведь store создаётся, когда вы делаете импорт.

1. Создавать уникальный UID для каждого экземпляра компонента. И уже редьюсерами писать в state[uid]

2. Реализовать оберточный класс компонента и уже внутри него создавать store и провайдить его.

Comments

[Сергей Сунцев]

Спасибо за совет,
Второй пункт правда практически полностью подразумевает переделку компонента.

[Dmitry Alekseev]

А в чем сложность сделать:

export default (props) => {
  const store = createStore(...);
  return <Provider store={store}>
    <YourComponent {...this.props} />
  </Provider>
}

[Сергей Сунцев]

Dmitry Alekseev, Недодумался... ))

[Dmitry Alekseev]

Сергей Сунцев, если ответ помог, отметьте его, как решение...