mapStateToProps 中应该包含多少逻辑？

Question

我正在尝试了解使用mapStateToProps. 具体来说，我将它解释为一个简单的辅助函数，用于仅提取 Store 的相关部分state并将它们提供给一个组件。

但是，我已经看到了模式，例如：

const mapStateToProps = (state, ownProps) => {
    const isActive = ownProps.Id === state.activeItemId;
    return { isActive };
}

在我看来，这不仅仅是获取某个状态……你应该进入多远mapStateToProps？难道所有的逻辑都不应该像渲染函数一样位于组件内部吗？

Answer 1

在我看来，如果您保留一些逻辑，那么测试组件和重用组件要容易得多。就像你在这里所做的一样，甚至更多。

有时，你想要一个“哑”组件来接收 props 并用它们做一些事情。

我的mapStateToProps函数看起来比你的更大，而且它们内部也有更多的逻辑，以便简化它们包装的组件的事情。

您实际上在 Redux 中还有另外两个类似的功能 -

mapDispatchToProps - 将组件与动作连接起来，它接收 dispatch 作为 prop，如下所示：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    },
    save: () => dispatch(saveUser())

  }
}

这里可以确保你的actions可以访问到`ownProps```，也就是组件直接接收到的props

和

mergeProps- 这个合并了所有的道具 - ownProps，stateProps来自 mapStateToProps 和dispatchProps.

你可以这样使用它：

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, {
    onClick: dispatchProps.onClick,
    onChange: stateProps.isActive ? dispatchProps.save() : null

  })
}

最后它看起来像这样：

const MyConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps
)(MyComponent)

通过这种方式，可以应用更多的逻辑，将“干净”的 props 传递给组件。