我应该使用 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 ，而是将整个 App 包装在一个<Provider>组件中。

这两种方法有什么区别？？看起来他们正在做同样的事情，那就是确保应用程序具有最新版本的状态。

如果我已经用<Provider>.

Answer 1

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

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.