Question

在React应用程序中使用Redux的最佳实践是将组件包装在'Provider'组件中：

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  rootElement
)

您可以在React-Redux文档https://react-redux.js.org/introduction/basic-tutorial中看到它。

我们从这种态度中得到什么好处？为什么不只将'store'导入'ToDoApp'组件中，并作为导入变量访问'store'？例如：

import { store } from './store';

class TodoApp extends Component {
  constructor(props) {
    super(props);
    console.log('constructor')
  }
  render() {
    console.log(store.getState());
  }
}

Answer 1

当我们调用提供程序时，在Redux中发生的实际点：它具有所有状态的存储，并且提供程序完成了将组件与Redux连接的工作，或者您可以说提供者完成了将您的应用程序与redux连接的工作，因为redux的作者不仅为单个框架设计了库，而且在不同平台上有如此之多的用途，商店内部有两件事（reducer和state ），并且所有状态都将提供者的外层连接到应用程序和redux库。

Answer 2

这对于react-redux的工作方式非常重要。

在组件上使用connect时，它会尝试使用React的上下文机制从您设置的Provider中获取存储。

不使用connect的情况下，极不可能在React中使用Redux，所以我建议您将其保留在该位置。

React-Redux：为什么我们需要用Provider包装组件？

2 个答案: