我有一个问题,即直接从商店使用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而不是直接从商店调用函数.

解决方法:

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

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

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

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

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

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