React-Redux 中的 Provider 和 Connect 的使用和原理

React-Redux 是一种用于构建 React 应用程序的库，它结合了 React 和 Redux 的功能。在 React-Redux 中，Provider 和 Connect 是两个重要的概念。Provider 是一个 React 组件，它允许我们将 Redux 存储库注入到 React 组件树中。而 Connect 是一个高阶组件，它允许我们将 Redux 存储库中的数据和操作映射到 React 组件的 props 中。

Provider 的使用

Provider 是 React-Redux 库中的一个组件，它被用来将 Redux 存储库注入到 React 组件树中。Provider 接收一个名为 store 的 prop，它是一个 Redux 存储库。我们可以使用 Provider 组件将 store 注入到 React 应用程序中的任何组件中。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

在上面的代码中，我们将 store 作为 prop 传递给 Provider 组件，并将 App 组件作为 Provider 的子组件。这样，App 组件以及它的子组件都可以通过 Connect 访问存储库中的数据和操作。

Connect 的使用

Connect 是一个高阶组件，它允许我们将 Redux 存储库中的数据和操作映射到 React 组件的 props 中。Connect 接收两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 是一个函数，它将存储库中的状态映射到组件的 props 中。mapDispatchToProps 是一个函数，它将存储库中的操作映射到组件的 props 中。

import React from 'react';
import { connect } from 'react-redux';

function Counter(props) {
  return (
    <div>
      <h1>{props.count}</h1>
      <button onClick={props.increment}>Increment</button>
      <button onClick={props.decrement}>Decrement</button>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上面的代码中，我们定义了 Counter 组件，并使用 connect 高阶组件将它连接到 Redux 存储库中。mapStateToProps 函数将存储库中的状态映射到组件的 props 中。mapDispatchToProps 函数将存储库中的操作映射到组件的 props 中。最后，我们将 Counter 组件包装在 connect 函数中，并导出连接后的组件。

Provider 和 Connect 的原理

Provider 组件的原理很简单。它使用 React 的上下文功能将 Redux 存储库传递给 React 组件树中的所有组件。这样，每个组件都可以访问存储库中的数据和操作。

Connect 组件的原理也很简单。它使用 React 的上下文功能获取存储库，并将 mapStateToProps 和 mapDispatchToProps 函数应用于存储库中的数据和操作。然后，它将映射后的数据和操作传递给组件的 props 中。

总结

在 React-Redux 中，Provider 和 Connect 是非常重要的概念。Provider 允许我们将 Redux 存储库注入到 React 组件树中，而 Connect 允许我们将存储库中的数据和操作映射到 React 组件的 props 中。理解 Provider 和 Connect 的使用和原理，能够帮助我们更好地使用 React-Redux 构建应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a8413eb4cecbf2dfb7829