React组件获取Redux store中状态的两大方式

在 React 中，组件可以通过 Redux store 来管理状态。Redux store 是一个全局的 state 容器，存储着应用程序的状态。组件可以通过 store.getState() 方法或 mapStateToProps 来获取 store 中的状态。

store.getState() 方法是一种直接从 store 中获取状态的方法。它返回 store 中的整个 state 对象。这种方法通常用于组件需要访问 store 中的多个属性的情况。

mapStateToProps 是一种将 store 中的状态映射到组件 props 的方法。它是一个函数，接受两个参数：state 和 ownProps。state 是 store 中的状态对象，ownProps 是组件本身的 props。mapStateToProps 函数返回一个对象，该对象包含了组件需要的状态属性。

使用 mapStateToProps 的好处是，它可以避免组件直接访问 store。这使得组件更加独立，便于测试。

下面是一个使用 store.getState() 方法的例子：

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

class MyComponent extends React.Component {
  render() {
    const state = this.props.store.getState();
    return (
      <div>
        {state.count}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    store: state
  };
};

export default connect(mapStateToProps)(MyComponent);

下面是一个使用 mapStateToProps 的例子：

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

class MyComponent extends React.Component {
  render() {
    const count = this.props.count;
    return (
      <div>
        {count}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

export default connect(mapStateToProps)(MyComponent);

这两种方法都可以用于从 Redux store 中获取状态。哪种方法更好取决于具体情况。