javascript - 减少 React-Redux 状态和调度样板

Question

我通常使用以下模式构建我的组件:

import selectors from '../store/selectors'
import someAction1 from '../actions/someAction1'
import someAction2 from '../actions/someAction2'
import someAction3 from '../actions/someAction3'

class MyComponent extends React.Component {
  render() => {
    return <Fragment>
      <div>{this.props.someReduxProperty1}</div>
      <div>{this.props.someReduxProperty2}</div>
      <div>{this.props.someReduxProperty3}</div>
      <a onClick={this.props.someAction1}>Action1</a>
      <a onClick={this.props.someAction2}>Action2</a>
      <a onClick={this.props.someAction3}>Action3</a> 
    </Fragment>
  }
}

export default connect(
  (state, ownProps) => {
    return {
      someReduxProperty1: selectors.getSomeReduxProperty1(state),
      someReduxProperty2: selectors.getSomeReduxProperty2(state),
      someReduxProperty3: selectors.getSomeReduxProperty3(state)
    }
  },
  (dispatch) => {
    return {
      someAction1: () => {
        dispatch(someAction1())
      },
      someAction2: () => {
        dispatch(someAction2())
      },
      someAction3: () => {
        dispatch(someAction3())
      }
    }
  }
)(MyComponent)

这确实完成了工作，但感觉就像我在重复输入相同的内容，即使是在这个微不足道的简短示例中也是如此。我的容器组件在起作用时感觉非常冗长。此外，我发现我经常修改组件中使用的属性和操作列表，这让不断重新输入所有内容变得更加令人沮丧。不过，我读到的大多数关于 react+redux 的例子似乎都反射(reflect)了这种代码设置。

这真的有必要吗？我正在考虑忽略似乎是 React+Redux 的最佳实践，只是将 state 和 dispatch 作为我的组件的 Prop 传递:

import selectors from '../store/selectors'
import someAction1 from '../actions/someAction1'
import someAction2 from '../actions/someAction2'
import someAction3 from '../actions/someAction3'

class MyComponent extends React.Component {
  render() => {
    const { state, dispatch } = this.props
    return <Fragment>
      <div>{selectors.getSomeReduxProperty1(state)}</div>
      <div>{selectors.getSomeReduxProperty2(state)}</div>
      <div>{selectors.getSomeReduxProperty3(state)}</div>
      <a onClick={() => { dispatch(someAction1()) }}>Action1</a>
      <a onClick={() => { dispatch(someAction2()) }}>Action2</a>
      <a onClick={() => { dispatch(someAction3()) }}>Action3</a>
    </Fragment>
  }
}

export default connect(
  (state, ownProps) => {
    return { state: state }
  }
  /* dispatch gets added by default */
)(MyComponent)

代码中只有最少的变量名重复。一个额外的好处是，由于每个组件的连接调用都是相同的，我可以只连接一个助手并进一步缩短我的组件:

export default connectHelper = (componentClass) => {
  return connect((state) => {
    return { state: state }
  })(componentClass)
}

class MyComponent extends React.Component {
  ...
}

export default connectHelper(MyComponent)

我确实失去了一些能力，仅通过浏览 connect 调用就可以一目了然地看到我的 Redux 商店使用了哪些属性。我对此没有意见。

所以我的问题是:

1. 我是否会因为基本上绕过 mapStatetoProps 而牺牲任何其他考虑因素？我担心的一个问题是，由于只有一个 state 属性，每当 Redux 存储中的任何属性发生变化时，React 可能会过分热心地重新渲染每个组件。这就是为什么需要在 mapStateToProps 中手动映射属性的原因吗？

2. 跳过 mapDispatchToProps 并使用默认注入(inject)的 this.props.dispatch 我失去了什么？我必须做“额外”的工作来直接在 mapDispatchToProps 中映射状态；我为此付出了什么？

3. 是否有其他代码组织/模式有助于减少 React+Redux 设置中的组件属性困惑？

谢谢!只是让我的头围绕着这些工具。这是一个有趣的练习，但有些事情感觉有点古怪!

Answer 1

是的，有很多方法可以缩短它。

首先，您应该使用 the "object shorthand" form of mapDispatch :

const mapDispatch = {
    someAction1,
    someAction2,
    someAction3,
};

其次，虽然我们没有与 mapState 等效的“对象速记”，但您可以使用 Reselect 的 createStructuredSelector API做同样的事情。

是的，如果您传递整个 state 值，您的组件现在将针对 Redux 存储的每次 更新重新呈现。 React-Redux does a lot of work internally to make sure your own component only re-renders when needed ，这是基于您的 mapState 函数返回的值。

第三，考虑在组件的开头使用解构来提取它们需要的特定 Prop ，这样您就不会在每一行都重复 this.props.。这可以是类组件的 render() 方法中的对象解构，也可以是函数组件的函数参数解构。

最后，虽然它不是特定于 React 的，但请查看我们的新 redux-starter-kit package .它包括用于简化几个常见 Redux 用例的实用程序，包括存储设置、定义缩减器、不可变更新逻辑、检查意外突变，甚至无需手动编写任何操作类型或操作创建者即可自动创建整个状态“切片”。