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

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

0 голосов
/ 02 декабря 2018

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

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

store.subscribe(render);

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

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 02 декабря 2018

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

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.

0 голосов
/ 03 декабря 2018

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

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

0 голосов
/ 02 декабря 2018

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

...