Как получить доступ к «магазину» в реагировать на избыточность?(или как связать действия)

Question

Я пытаюсь добавить слушателя в мой магазин.Кажется, что в каждом примере, который я нахожу в сети, используется store.subscribe(() => function here)

Однако я не могу получить доступ к «хранилищу» ни из одного компонента, не являющегося пользователем root.Я нашел несколько вопросов об этом ( Как получить доступ к хранилищу во втором компоненте вact-redux ), но они говорят только о доступе к реквизитам / действиям с использованием Provider=store HOC, а не о доступе к магазинуСам делать такие вещи, как добавление слушателей в магазин.

(для моего конкретного случая использования я хочу прослушать хранилище, если «activeUser» изменится, и если это произойдет, запустить цепочку дополнительных действий. Я считаю, что это, вероятно, можно решить с помощью thunkи просто связывание действий с действием setActiveUser ... так что этот вопрос немного больше о том, как на самом деле получить слушателей в хранилище, чем об этой конкретной проблеме)

Answer 1

То, чего вы пытаетесь достичь, - это обязательное программирование.Reaction-redux разработан на основе декларативного характера React и поэтому предотвращает прямой доступ ваших компонентов к магазину.

Грязным решением было бы экспортировать хранилище из модуля Javascript, в котором он был создан, чтобы сделать его доступным для любого другого модуля вашего приложения.Таким образом, вы можете создавать свои подписки в любом месте, а не только в качестве корневого компонента.Однако это анти-паттерн , и его следует избегать.

Лучшее решение вашей проблемы - принять декларативный характер React и сделать что-то вроде этого:

MyComponentContainer.js

import {connect} from 'react-redux';
import {MyComponent} from './MyComponent';

function mapStateToProps(state) {
  return {
    activeUser: /* extract the active user from the state object */
  };
}

export const MyComponentContainer = connect(mapStateToProps)(MyComponent)

MyComponent.js

import React from 'react';

export class MyComponent extends React.Component {
  componentDidMount() {
      this.yourChainOfActions(this.props.activeUser);
  }

  componentDidUpdate(prevProps) {
    if(this.props.activeUser.id !== prevProps.activeUser.id) {
      this.yourChainOfActions(this.props.activeUser);
    }
  }

  yourChainOfActions = (activeUser) => {
    // ...
  };

  render() {
    // ...
  }
}

Это требует небольшого изменения сознания, но это лучший способпринудительно реагировать на изменения с помощью React (пока не появятся хуки )

- EDIT -

Если "yourChainOfActions" состоит из множестваиз store.dispatch() звонков, вам необходимо предоставить MyComponent доступ к функции store.dispatch.Обычно вы бы не передавали эту функцию напрямую, а скорее создавали бы оболочку в MyComponentContainer mapDispatchToProps, например:

MyComponentContainer.js

import {connect} from 'react-redux';
import {MyComponent} from './MyComponent';

function mapStateToProps(state) {
  return {
    activeUser: /* extract the active user from the state object */
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onActiveUserChange(activeUser) {
       // use dispatch however you wish here
    }
  }
}

export const MyComponentContainer = connect(mapStateToProps, mapDispatchToProps)(MyComponent)

MyComponent теперь будет иметь доступ к функции onActiveUserChange через свои реквизиты, которые вы можете использовать в ее componentDidUpdate жизненном цикле.

Вы можете решить разделить onActiveUserChange на группуотдельных функций для лучшей компоновки.Это зависит от вас и ваших вариантов использования.

Answer 2

Быстрый ответ - не делайте этого в своем компоненте!

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