我应该使用Redux store.subscribe()还是用react-redux包装我的应用程序<Provider>？

Question

我见过两种方法： 在这个示例中，该示例取自 Dan Abramov 的课程， 他正在使用这种方法：

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

store.subscribe(render);

Redux 中的 store.subscribe() 函数允许添加在调度操作时调用的侦听器。

在这个其他示例中，这是 Redux 文档中的示例：

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

不使用 store.subscribe，而是将整个应用程序包装在

<Provider>

组件中。

这两种方法有什么区别？ 看来他们在做同样的事情，就是确保App拥有最新版本的状态。

如果我用

<Provider>

包装了我的应用程序，我可以/应该使用 Store.subscribe 吗？

Answer 1

您可以使用第一种方法，但是您应该在将来将存储传递给所有其他组件。手动执行此操作需要大量工作，但除此之外它还会使事情变得困难，例如测试等。

Provider

不是

Redux

的一部分，但附带

react-redux

让事情变得更容易。你用它包裹你的组件，它会一直向下传递存储。

react-redux

还提供

connect

功能。您可以在组件中任何想要到达操作调度程序和状态的地方使用它。

所以，你可以很容易地看出，使用

Provider

组件几乎是事实上的标准。因此，您可能想使用它，并且不必费心手动执行

store.subscribe

并将您的商店传递给其他组件。所以，如果您使用

Provider

，您就不会使用

store.subscribe

。

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

然后，在另一个您想要使用 redux 优点的组件中：

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 可以让你不必这么做。