组件中的 store.getState 或 mapStateToProps

Question

我有一个问题，直接使用 store 中的 getState 或使用 mapStateToProps 有什么区别。请看我下面的例子

import React, { Component } from 'react'
import store from '../store'
import { connect } from 'react-redux';

class Test extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        <h1>{this.props.count}</h1>
        <h2>{store.getState().reducer1.count}</h2>
      </p>
    )
  }
}

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

// export default Test;
export default connect(mapStateToProps)(Test);

上面的store.getState和ma​​pStateToProps都正常工作，当状态改变时它仍然会更新。如果我们只使用 getState，我们不需要使用 connect 方法。

我认识到的另一点是当使用 ma​​pStateToProps 和 connect 时，在 reducer 中，我们必须返回对象状态的新副本，而不是返回带有修改的状态。如果没有，当状态改变时组件不会更新。像这样：

return Object.assign({}, state, {
        count: state.count + 1,
        payload: action.payload,
      });

但如果我们使用 store.getState()，我们可以返回一个新副本或修改后的副本。像这样：

state.count++;
state.payload = action.payload;
return state

谁知道请给我解释一下，谢谢。

P/S：和 store.dispatch vs mapDispatchToProps 类似，这两个都可以正常工作，只是想知道为什么我们应该使用 mapToProps 和 connect 而不是直接从 store 调用函数。

Answer 1

mapStateToProps 只是一个辅助函数，它对于以模块化方式管理项目非常有帮助。例如，您甚至可以将连接的所有逻辑放在单独的文件中，并在您想要的地方使用。

假设您正在开发一个大型应用程序，然后猜测其中嵌套的各种属性。使用 connect，您实际上是在对项目进行模块化，这对观看项目的开发人员非常有帮助。

如果你不这样做，你就是在一个文件中写了几行代码。

---

直接使用 getState() 或 dispatch() 时可能会遇到的问题。请参阅此post 以获得一些帮助以使其清晰。

---

使用 connect 的主要好处是您无需担心使用 store.subscribe() 何时更改状态，connect 会在每次更新时通知您每个状态更改。

另外，react 的核心概念是基于 props 和 states 的。使用 connect 可以让你获得 redux 状态作为 props。使用this.props :)

嗯，我记得在什么情况下我直接访问了商店而不是使用连接。在我的项目中，我需要将所有 redux 状态以不同的形式保存到某个地方，我不需要将它连接到任何组件。在这种情况下，直接使用 redux store 是非常简单和有用的。但是，如果我们在这种情况下尝试对 connect 进行相同的操作，那么我们将遇到困难。

因此，我建议您单独使用它们。

1. 如果您想与组件进行映射，请使用 connect。
2. 如果不需要与组件进行映射，直接访问 redux store。

---

此外，本博客将解释更多：react redux connect explained

Redux 流程：

使用 connect 和 react 组件：

总结：使用连接，您使用提供程序，它允许每个子组件通过提供提供程序并在根应用程序组件中使用存储道具来访问商店。