Question

我看过两种方法：在this example中，该课程摘自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（）函数允许添加在分派操作时被调用的侦听器。

在此other example中，这是Redux文档中的示例：

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

未使用store.subscribe，而是将整个应用包装在<Provider>组件中。

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

如果我用<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

在真实的应用程序中，您不应直接订阅商店。 React-Redux为您做到了。

请访问"Why Use React-Redux?"上的新文档页面以获取更多说明，以及我最近的帖子Idiomatic Redux: The History and Implementation of React-Redux上的React-Redux所做的一些工作的详细信息，以使您没有

Answer 3

<Provider>组件特定于官方的React-Redux绑定器。因此，如果您使用的是React-Redux（而不仅仅是Redux），请使用<Provider>。 <Provider>组件将确保包裹在其中的所有内容都可以访问商店。

我应该使用Redux store.subscribe（）还是使用react-redux <provider>包装我的应用程序？

3 个答案: