Должен ли я использовать Redux store.subscribe() или обернуть свое приложение в act-redux <Provider>?

Question

Я видел два подхода: в этом примере, который взят из курса Дана Абрамова, он использует этот подход:

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() =>
        store.dispatch({
          type: 'INCREMENT'           
        })            
      }
      onDecrement={() =>
        store.dispatch({
          type: 'DECREMENT'           
        })            
      }
    />,
    document.getElementById('root')
  );
};

store.subscribe(render);

Функция store.subscribe() в Redux позволяет добавлять прослушиватели, которые вызываются при отправке действия.

в этом другом примере, который является примером из документации Redux:

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

store.subscribe не используется, но вместо этого они обертывают все приложение внутри <Provider> составная часть.

В чем разница между двумя подходами? Кажется, они делают то же самое, чтобы убедиться, что приложение имеет последнюю версию состояния.

Могу ли я использовать Store.subscribe, если я завернул свое приложение <Provider>?

Answer 1

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

Provider не является частью Redux но приходит с react-redux чтобы сделать вещи проще. Вы оборачиваете свой компонент им, и он проходит весь магазин вниз. react-redux также обеспечивает connect функция. Вы используете его в компонентах, где бы вы ни хотели связаться с вашими диспетчерами действий и вашим состоянием.

Таким образом, вы можете легко увидеть, что с помощью Provider Компонент является практически стандартом де-факто. Так что, вероятно, вы хотите использовать его и не беспокоиться о том, чтобы делать вручную store.subscribe и передача вашего магазина другим компонентам. Итак, если вы используете Provider ты не будешь использовать store.subscribe,

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Затем, в другом компоненте, где вы хотите использовать вкус редукса:

const Component = ...

const mapStateToProps = (state) => ({
    value: state.someValueFromState
});

const mapDispatchToProps = { action, otherAction };

export default connect(
  mapStateToProps,
  mapDispatchToProps
  // or you can use action creators directly instead of mapDispatchToProps
  // { action, otherAction }
)(Component);

Затем вы можете использовать создателей ваших действий и значения состояний в качестве реквизита в Component,

Answer 2

<Provider> Компонент специфичен для официальных связывателей React-Redux. Так что если вы используете React-Redux (и не только Redux), используйте <Provider>, <Provider> Компонент позаботится о том, чтобы все, что в него было упаковано, имело доступ к магазину.

Answer 3

В реальном приложении вы не должны подписываться на магазин напрямую. React-Redux сделает это за вас.

Пожалуйста, смотрите нашу новую страницу документации "Зачем использовать React-Redux?" для некоторого дальнейшего объяснения, а также моего недавнего поста " Идиоматическое Redux: история и реализация React-Redux" для подробностей о некоторых работах, которые выполняет React-Redux, чтобы вам не пришлось этого делать.