Component中的store.getState或mapStateToProps

Question

我有一个问题,即直接从商店使用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和mapStateToProps以上工作正常,但它仍然更新时的状态变化.如果我们只使用getState,我们不需要使用connect方法.

我已经认识到的另一点是当使用带有connect的mapStateToProps时,在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和mapDispatchToProps类似,那些2将正常工作,只是想知道为什么我们应该使用mapToProps与connect而不是直接从商店调用函数.

Answer 1

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

假设您正在处理大规模应用程序,那么猜测嵌套在那里的各种属性.使用connect实际上是模块化项目,这对于观看项目的开发人员非常有用.

如果不这样做,那么您将在单个文件中编写几行代码.

直接使用getState()或dispatch()时可能遇到的问题.请参阅此帖子以获得一些帮助以明确说明.

使用connect的关键好处是您无需担心何时使用store.subscribe()更改状态,connect会在更新时让您知道每个状态更改.

此外,反应核心概念是基于道具和状态.使用connect允许您将redux状态作为道具.使用this.props:)

啊,我记得我在什么条件下直接访问商店而不是使用connect.在我的项目中,我需要以不同的形式将所有redux状态保存到某个地方,我不需要将它连接到任何组件.在这种情况下,直接使用redux存储非常容易且有用.但是如果我们在这种情况下尝试连接相同,那么我们将遇到困难.

因此,我建议你在不同的条件下使用它们.

1. 如果要使用组件映射,请使用connect.
2. 如果您不需要使用组件映射,请直接访问redux store.

此外,这篇博客将解释更多:反应redux连接解释

Redux流程:

使用与反应组件连接:

总结:使用connect,您可以使用提供程序,它允许每个子组件通过提供提供程序并在根应用程序组件中使用存储道具来访问存储.