减少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的大多数示例似乎都反映了此代码设置。

这真的有必要吗？ 我打算无视似乎是阵营+终极版的最佳做法和刚刚通过的state和dispatch作为道具来我的组件：

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)

该代码仅具有最少的变量名重复。 另外一个好处是，由于每个组件的connect调用都是相同的，因此我可以连接一个助手，甚至可以缩短我的组件：

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和利用默认的注入this.props.dispatch ？ 我必须做“额外的”工作才能直接在mapDispatchToProps中映射状态。 我为此付出什么？

3. 还有其他代码组织/模式可帮助减少React + Redux设置中的Component属性混乱吗？

谢谢！ 只是把我的头缠在这些工具上。 这是一个有趣的练习，但是有些事情有些古怪！

Answer 1

是的，有很多方法可以缩短这一时间。

首先，您应该使用mapDispatch的“对象简写”形式 ：

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

其次，虽然我们没有对应于mapState的“对象简写”， mapState您可以使用Reselect的createStructuredSelector API来做同样的事情。

是的，如果传递整个state值，则组件将针对Redux存储的每次更新重新呈现。 React-Redux在内部做了很多工作，以确保您自己的组件仅在需要时才重新渲染 ，而这是基于mapState函数返回的值。

第三，考虑在组件开始时使用this.props.来提取它们所需的特定道具，因此您无需重复执行this.props. 在每一行上。 这可以是在类组件的render()方法中进行对象分解，也可以是对功能组件进行功能参数分解。

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