Question

我试图理解使用mapStateToProps的建议模式。具体来说，我将其解释为一个辅助函数，只提取Store state的相关部分并将它们提供给一个Component。

但是，我见过模式，例如：

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

在我看来，这不仅仅是抓住一些州......你应该在mapStateToProps走多远？不应该将所有逻辑都放在组件内部，例如，渲染功能？

Answer 1

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

有时候，你想要一个“愚蠢”的组件来接收道具并用它们做些什么。

我的mapStateToProps函数看起来比你的日志大，并且它们内部也有更多的逻辑，以简化它们包装的组件的内容。

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

mapDispatchToProps - 将组件与动作连接起来，它接收派遣作为道具，如下所示：

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

在这里，您可以确保您的操作可以访问`ownProps```，这是组件直接接收的道具

和

mergeProps - 这个合并所有道具 - 来自mapStateToProps的ownProps，stateProps和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)

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

应该在mapStateToProps中放置多少逻辑？

1 个答案: